How can I reset sidenote numbering at each chapter in tufte-style Bookdown with HTML output?

Question

I am working on converting a tufte-LaTeX book to tufte-Bookdown using the tufte and msmbstyle packages. I have a whole bunch of sidenotes and would like the numbering to restart with each chapter so I don't reach like 400 by the end of the book.

I found this CSS code in the Bookdown GitHub for doing this with regular Bookdown, which uses footnotes/endnotes. However, my attempts to modify the code to work with sidenotes have failed. This is my current CSS addition, which just takes that code and drops in sidenote or sidenote-number (which Inspect Element suggests are the correct tags) where footnote originally was:

/* generate new footnote calls */
.sidenote-number::after {
  content: counter(fn-call);
  position: relative;
  top: -.5em;
  font-size: 85%;
  line-height: 0;
  vertical-align: baseline;
}

/* use a counter for footnotes numbering */
.sidenote ol {
  list-style: none;
  counter-reset: fn-number;
}

.sidenote li {
  counter-increment: fn-number;
}

.sidenote li p:first-child::before {
    content: counter(fn-number) '. ';
    width: 1.5em;
    float: left;
}

This does not work as intended, and instead adds a new counter that numbers each sidenote marker with a counter that resets for each marker, so the in-text marker gets a 1 and the sidenote marker gets a 2.

My CSS skills are not exceptional and I'm not sure of the right next step. How can I get the actual marker to reset?

You can see an example of a page built with tufte/msmbstyle here; sidenote 4 can be found by scrolling down just a bit.

Answer 1

I ended up paying someone to solve this. They wrote some JavaScript that will fix it. The following code can be saved as an HTML file, and added to the book with

includes:
  in_header: thishtmlfile.html

in the YAML. Here is the code for the HTML/JS/Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    var element_label= $("label[for *= 'tufte-sn-']");
    var count = $(element_label).length;
    $(element_label).each(function( index ) {
      //console.log( ++index + ": " + $( this ).text() );
      $(this).attr('for','tufte-sn-'+ ++index);
      $(this).text(index);
    });
  });
  $(document).ready(function () {
    var element_input= $("input[id *= 'tufte-sn-']");
    var count = $(element_input).length;
    $(element_input).each(function( index ) {
      //console.log( ++index + ": " + $( this ).text() );
      $(this).attr('id','tufte-sn-'+ ++index);
    }); 
  });
  $(document).ready(function () {
    var element_span= $("span[class *= 'sidenote-number']");
    var count = $(element_span).length;
    $(element_span).each(function( index ) {
      //console.log( ++index + ": " + $( this ).text() );
      $(this).text(++index);
    }); 
  });
</script>