JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0);" class="add_new">Add new</a>

<form name="form" id="form" method="post" action="">
  <input type="text" class="count" value="0" />
  <div class="result">
    <div id="test" class="opt copy none">
      <h2>Testing</h2>
      <input type="checkbox" name="checkbox" value="1" /> Checkbox 1<br />
      <input type="checkbox" name="checkbox" value="2" /> Checkbox 2<br />
      <input type="checkbox" name="checkbox" value="3" /> Checkbox 3<br />
      <input type="checkbox" name="checkbox" value="4" /> Checkbox 4<br />    
    
      <input type="text" name="resultfinal" value="" class="resultfinal" />
    </div>
  </div>
</form>

CSS

.none { display:none; }

JavaScript

jQuery.noConflict();

jQuery(document).ready(function()
{
  var $current = jQuery(this);
  
  jQuery(".add_new").bind("click", function() {
    jQuery(".copy").clone().insertBefore(".copy").removeClass("none").removeClass("copy");
    jQuery(".count").val( parseInt(jQuery(".count").val()) + 1 );
    
    re($current);  
  });  
});

function re($current)
{
  $current.find('.opt').not('.copy').each(function( i )
  {
    var $current_div = jQuery(this);
    $seletor = $current_div.attr( "id", "id_" + (i + 1) );
        
    jQuery($seletor + ':checkbox').click(function()
    {
      var val = [];
      jQuery($seletor + ':checkbox:checked').each(function(i)
      {
        val[i] = jQuery(this).val();
      });
              
      jQuery($seletor).find(".resultfinal").val ( val );
    });
  });
}