使用javascript函數而不重複它

Question

以下<div>部分我正在複製和下面的JavaScript函數，我想一次又一次地使用。如果可能，請分享您的想法。

<?php $new_material = ["a","b","c"]; //array to pass in foreach 

      foreach ($new_material as $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代碼：這是JavaScript函數，我想用每當我重複上面的代碼，因爲我在foreach()循環使材料的名稱，所以它是基於每一個材料名稱重複。

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 only be one element with an 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 the id of the parent 
    element.parentNode.removeChild(element); 
} 

Answer 1

JavaScript文件/代碼加載的自然地方是在頭部，所以只要把它放在那裏。因爲你不希望你的頭被無意中複製（無效的HTML）。