JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="parentdiv">
   <h2>activateUiHTML</h2>
<div id="67" class="activateUiHTML" data-role="collapsible">
   <form>
      <input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="67"/>
      <label class="testtt" for="checkbox-mini-0">ID-67</label>
   </form>
   <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML</a>
   </section>
</div>
   
    <div id="68" class="activateUiHTML" data-role="collapsible">
   <form>
      <input type="checkbox" class="checkboxclas" name="checkbox-mini-0" id="68"/>
      <label class="testtt" for="checkbox-mini-0">ID-68</label>
   </form>
   <section class="secclass"><a href="#">Honey with Chocolate Sauce  10 ML2</a>
   </section>
</div>
    </div>


<div id="ordersdiv">
   <h2>My Orders</h2>
</div>

JavaScript

$(document).on("click", ".checkboxclas", function(e) {

     if ($(this).is(':checked')) {
        var id_attr_val = $(this).attr("id");
    if(!$('#addtoordersdiv'+id_attr_val).length )
{
     var buildcart = $('<div id="addtoordersdiv'+id_attr_val+'"></div>');
    //var divdata = $("div.activateUiHTML").html();
      var divdata = $("div#"+id_attr_val+".activateUiHTML").html();
     buildcart.append(divdata);
    $("#ordersdiv").append(buildcart);
         $('#addtoordersdiv'+id_attr_val).find(".checkboxclas").prop("checked",true );
     }
     }
    else
    {
            var id_attr_val = $(this).attr("id"); $('#addtoordersdiv'+id_attr_val).find(".checkboxclas").prop("checked",false );
    }

});