JSFiddle - React, Tailwind, and code Playground

HTML

<div  data-role="collapsible"> 
                        <div class="prd-items-detials"> 
                        <ul> 
                        <li class="head"> 
                        <form> 
                        <label class="testtt" for="checkbox-mini-0">Test Item</label> 
                        </form> 
                        </li> 
                        <li class="prd-items-qt"> 
                        <div class="col"> 
                        <span class="prd-sm-img"><img id="imagesd" type="img" height="40" width="40"  src="' + image + '"/> 
                        <span> 
                        </div> 
                        <div class="col"> 
                        <i class="minus" id_attr="59"> </i>
                        <i class="qt_class" id_attr="59">1</i> 
                        <i class="plus" id_attr="59"> </i> 
                        </div> 
                        <div class="col"> 
                        <a href="#" id_attr="59" class="btn btn-sm">Topping</a> 
                        </div><div style="display: none;" class="price" id_attr="59">50</div> 
                        <div class="col total" id_attr="59">50</div> 
                        </li> 
                        </ul> 
                        </div> 
                        <div id="59" class="Test-details"> 
                        
                        </div> 
                        </div>
                        <input type="button" id="moreFieldsBtn" value="Add Data To Specific Place"  />

JavaScript

$(document).on("click", "#moreFieldsBtn", function() { 
   var orderconfirmhtml = '<h4>Complete your order</h4>';
   $(this).parent().find('.Test-details').html(orderconfirmhtml);
});