Code folding in rmarkdown: can't get div wrapper to work

I was excited to try this code folding method but am having trouble implementing it. I've never used javascript before and can't figure out how to add the div wrapper. Is it supposed to be part of the code chunk (grey background) or regular text before and after the chunk? If the former, whenever I try to bump the ```{r } down 1 line to make room for the first div call, the chunk disappears. If the latter, I do not get the desired results when I knit.

Here is a reproducible example:

title: "Toy markdown doc for js"
author: "Carrie Perkins"
date: "1/10/2021"
output: html_document

$(document).ready(function() {

  $chunks = $('.fold');

  $chunks.each(function () {

    // add button to source code chunks
    if ( $(this).hasClass('s') ) {
      $('pre.r', this).prepend("<div class=\"showopt\">Show Source</div><br style=\"line-height:22px;\"/>");
      $('pre.r', this).children('code').attr('class', 'folded');

    // add button to output chunks
    if ( $(this).hasClass('o') ) {
      $('pre:not(.r)', this).has('code').prepend("<div class=\"showopt\">Show Output</div><br style=\"line-height:22px;\"/>");
      $('pre:not(.r)', this).children('code:not(r)').addClass('folded');

      // add button to plots
      $(this).find('img').wrap('<pre class=\"plot\"></pre>');
      $('pre.plot', this).prepend("<div class=\"showopt\">Show Plot</div><br style=\"line-height:22px;\"/>");
      $('pre.plot', this).children('img').addClass('folded');


  // hide all chunks when document is loaded
  $('.folded').css('display', 'none')

  // function to toggle the visibility
  $('.showopt').click(function() {
    var label = $(this).html();
    if (label.indexOf("Show") >= 0) {
      $(this).html(label.replace("Show", "Hide"));
    } else {
      $(this).html(label.replace("Hide", "Show"));
    $(this).siblings('code, img').slideToggle('fast', 'swing');

.showopt {
  background-color: #004c93;
  color: #FFFFFF; 
  width: 100px;
  height: 20px;
  text-align: center;
  vertical-align: middle !important;
  float: right;
  font-family: sans-serif;
  border-radius: 8px;

.showopt:hover {
    background-color: #dfe4f2;
    color: #004c93;

pre.plot {
  background-color: white !important;


<div class="fold s o">

```{r cars}


This is what I get when I knit:

enter image description here

enter image description here