JSFiddle - React, Tailwind, and code Playground

by Mark Pitman

HTML

<body>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="addlinks.js"></script>
  <ul class="nav checklist-sidebar">
  </ul>
  <table>
    <tr class="theclass">
      <td>stuff1</td>
    </tr>
    <tr>
      <td>stuff2</td>
    </tr>
    <tr>
      <td>stuff3</td>
    </tr>
    <tr>
      <td>stuff4</td>
    </tr>
    <tr>
      <td>stuff5</td>
    </tr>
    <tr>
      <td>stuff6</td>
    </tr>
    <tr>
      <td>stuff7</td>
    </tr>
    <tr class="theclass">
      <td>stuff8</td>
    </tr>
    <tr>
      <td>stuff9</td>
    </tr>
    <tr>
      <td>stuff10</td>
    </tr>
    <tr>
      <td>stuff11</td>
    </tr>
    <tr>
      <td>stuff12</td>
    </tr>
    <tr>
      <td>stuff13</td>
    </tr>
    <tr>
      <td>stuff14</td>
    </tr>
    <tr>
      <td>stuff15</td>
    </tr>
    <tr>
      <td>stuff16</td>
    </tr>
    <tr>
      <td>stuff17</td>
    </tr>
    <tr>
      <td>stuff18</td>
    </tr>
    <tr class="theclass">
      <td>stuff19</td>
    </tr>
    <tr>
      <td>stuff20</td>
    </tr>
    <tr>
      <td>stuff21</td>
    </tr>
    <tr>
      <td>stuff22</td>
    </tr>
    <tr>
      <td>stuff23</td>
    </tr>
    <tr>
      <td>stuff24</td>
    </tr>
    <tr>
      <td>stuff25</td>
    </tr>
    <tr>
      <td>stuff26</td>
    </tr>
    <tr>
      <td>stuff27</td>
    </tr>
    <tr>
      <td>stuff28</td>
    </tr>
    <tr>
      <td>stuff29</td>
    </tr>
    <tr>
      <td>stuff30</td>
    </tr>
    <tr>
      <td>stuff31</td>
    </tr>
    <tr>
      <td>stuff32</td>
    </tr>
    <tr>
      <td>stuff33</td>
    </tr>
    <tr>
      <td>stuff34</td>
    </tr>
    <tr>
      <td>stuff35</td>
    </tr>
    <tr class="theclass">
      <td>stuff36</td>
    </tr>
    <tr>
      <td>stuff37</td>
    </tr>
    <tr>
      <td>stuff38</td>
    </tr>
  </table>
</body>

JavaScript

(function() {
  $(document).ready(function() {

    var rows = $("tr.theclass");
    var list = $("ul.nav.checklist-sidebar")

    for (i = 0; i < rows.length; i++) {
      console.log(i);
      $("td:first", rows[i]).prepend($("<a></a>").attr("name", "aname" + i));
      list.append($("<li></li>").append($("<a></a>").attr("href", "#aname" + i).text("Step " + (i + 1))));
    }
  });
})();