javascriptでフォームを追加できない

Question

ボタンを押して動的に追加されるフォームがあります。問題は、すべてのプロセスが最初に私がボタンを押したときに正常に動作することです。 2回目からは、フィールドのIDが同じであるため、プロセスは機能しません。どのように調整することができますか？

$(document).ready(function() { 
 
    $("#aggiungi_collo").click(function() { 
 
    $('#lista_colli').append('<tr>\ 
 
     <td><input style="width:100px" type="text" class="form_control" id="cod_collo" /></td>\ 
 
     <td><input style="width:100px" type="text" class="form_control" id="larghezza" /></td>\ 
 
     <td><input style="width:100px" type="text" class="form_control" id="lunghezza" /></td>\ 
 
     <td><input style="width:100px" type="text" class="form_control" id="altezza" /></td>\ 
 
     <td><input style="width:100px" type="text" class="form_control" id="volume" /></td>\ 
 
     <td><button id="calcola" class="btn btn-primary calcola" style="background:green;border:none"><i style="color:white;height:20px" class="fa fa-trash"></i>Calcola</button></td>\ 
 
     <td><button href="#" class="btn btn-primary" style="background:red;border:none"><i style="color:white;height:20px" class="fa fa-trash"></i>Elimina</a></td>\ 
 
    </tr>'); 
 

 
    $('#calcola').click(function() { 
 
     var larghezza = $('#larghezza').val(); 
 
     var altezza = $('#altezza').val(); 
 
     var lunghezza = $('#lunghezza').val(); 
 
     var calcola = lunghezza * altezza * larghezza; 
 
     var volume = document.getElementById('volume'); 
 
     volume.value = calcola; 
 
    }); 
 
    }); 
 
});

Answer 1

ボタンをクリックし、あなたのIDにこれを連結された回数を追跡する変数を作成します。