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) {
        var id_attr_val = $(this).attr("id");
    
        var buildcart = $('<div id="addtoordersdiv'+id_attr_val+'"></div>');
        //var divdata = $("div.activateUiHTML").html();
        var divdata = $("div#"+id_attr_val+".activateUiHTML").html(); 
    if ($(this).is(':checked') && $("#ordersdiv").children('#addtoordersdiv'+id_attr_val).length==0) {
        buildcart.append(divdata);
        $("#ordersdiv").append(buildcart);       
         $('#addtoordersdiv'+id_attr_val).find(".checkboxclas").prop("checked",true );
     }
    else if($(this).is(':checked'))
    {
        $('#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 );
    }

});