JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<div id="root">
      <pre><a class="counter" href="#">$(":checked").length</a>: <strong><span class="result">-</span></strong></pre><br />
      <a class="inserter" href="#">Duplicate &lt;div&gt; with checkboxes and radiobuttons</a>

      <div class="boxes">
        <hr />
        <form>
          <input type="checkbox" name="c1" value="a" checked="checked" /> A<br />
          <input type="checkbox" name="c1" value="d" checked="checked" /> B<br />
          <br />
          <input type="radio" name="r1" value="1" checked="checked" /> 1<br />
          <input type="radio" name="r1" value="2" /> 2<br />
        </form>
      </div>

    </div>

JavaScript

$(document).ready(function() {

        // Duplicate <div class="boxes"> ...
        $("a.inserter").click(function(e) {
          e.preventDefault();
          $(this).next().clone().appendTo("#root");
          $("a.counter").click(); // ... and update the counter
        });

        // Count all elements :checked inside the document:
        $("a.counter").click(function(e) {
          e.preventDefault();
          $("span.result").text($(":checked").length);
        });

        // Prefill the counter
        $("a.counter").click();
      });