php - Using the javascript function without repeating it -

the following <div> section duplicating , below javascript function, want use again , again. share ideas if possible.

 <?php  $new_material = ["a","b","c"];   //array pass in foreach              foreach ($new_material $mat) {       ?>      <div class="row " id="row2">               <div class="row " id="row2.1">                 <div class="col-xs-2">                    <label>material name</label>                 </div>                 <div class="col-xs-3">                   <label>brand</label>                 </div>                 <div class="col-xs-2">                   <label>category</label>                 </div>               </div>                  <div class="row " id="row2.2">               <div class="col-xs-2">                   <p id="material_select"><?=$mat?></p>             </div>                  <div class="col-xs-3">                   <input type="text" class="form-control" name="brand" id="brand"/>                 </div>                 <div class="col-xs-2">                   <input type="text" class="form-control" name="category" id="category"/>                 </div>                   <label class="col-xs-2">total quantity:</label>                 <div class="col-xs-2">                   <input type="text" class="form-control" name="totalquantity" id="totalquantity"/>                 <br>                 </div>               </div>                <div class="row " id="row2.3">                 <label class="col-xs-1">specification</label>                 <label class="col-xs-1">quantity</label>                 <label class="col-xs-2">unit</label>                <button type="button" onclick="duplicate()" class="btn btn-info col-xs-3" >add specification</button>                         <label class="col-xs-2">unit:</label>                         <span id="units_div">                         <p class="" name="units"/>                       </span>               </div>                   <div class="row " id="duplicater" >                     <div class="col-xs-1">                       <input type="text"  id="specification" class="form-control" name="specification[]"/>                     </div>                     <div class="col-xs-1">                       <input type="text"  id="quantity" class="form-control" name="quantity[]"/>                     </div>                     <div class="col-xs-2" id="units1_div">                         <p id="unit" name="unit[]"/>                       </div>                       <div class="col-xs-2" id="delete">                       <button id="delete_btn"type="button" onclick="removeduplicate(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">delete</button>                     </div>                   </div>                   </div>                      <br>                 <div>                 <div class="row " id="row2.4">                   <label class="col-xs-1">tax</label>                   <label class="col-xs-1">tax%</label>                   <label class="col-xs-2">tax amount</label>                   <button type="button" onclick="duplicate1()" class="btn btn-info col-xs-3" >add tax</button>                   <label class="col-xs-2">rate</label>                   <div class="col-xs-2">                     <input type="text" class="form-control" name="rate" id="rate"/><br>                   </div>                 </div>                   <div class="row " id="duplicater1" >                     <div>                      <input type="text" id="taxamt" class="form-control" name="taxamount[]"/>                    </div>                     <div class="col-xs-1" id="tax_div">                         <p id="unit" name="taxper[]"/>                     </div>                     <div class="col-xs-1">                       <input type="text" id="taxamt" class="form-control" name="taxamount[]"/>                     </div>                     <div class="col-xs-2" id="delete">                       <button id="delete_btn1" type="button" onclick="removeduplicate1(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">delete</button>                     </div>                   </div>                 </div>                 <div class="row" id="row 2.5">                   <div class="col-xs-7">                   </div>                     <label class="col-xs-2">total amount</label>                   <div class="col-xs-2">                     <p id="totalamount" name="totalamount"></p>                     <input type="hidden" value="" name="totalamount" id="totalamount" readonly/><br>                   </div>                 </div>          <?php            }           ?> 

javascript code: javascript function, want use whenever i'm duplicating above code i'm passing material name in foreach() loop, duplicating based on every material name.

function duplicate() {   document.getelementbyid('delete_btn').style.visibility = "visible";   var original = document.getelementbyid('duplicater');   var clone = original.clonenode(true); // "deep" clone     clone.id = "duplicetor" + ++i; // there can 1 element id     original.parentnode.appendchild(clone);    document.getelementbyid('delete_btn').style.visibility = "hidden";    document.getelementbyid('specification').value="";    document.getelementbyid('quantity').value="";    document.getelementbyid('unit').value=""; }  function removeduplicate(element){     element=element.parentnode.parentnode;//gets id of parent     element.parentnode.removechild(element); } 

natural place of javascript files/code loading in head place there. since not want head duplicated anyways (invalid html).