[Javascript] Multi input su due tabelle correlate

[automation64]

Gentilissimi, vorrei creare due tabelle correlate fra di loro la seconda dipendente dalla prima. Mi spiego, ad ogni riga della prima tabella, vorrei collegare una o più righe della seconda tabella e poi salvare il tutto in DB. Lo script che allego aggiunge o rimuove le righe nelle singole tabelle ma non come serve al mio specifico scopo. qualcuno può darmi una dritta

<script>
   $(document).ready(function() {
       var i = 1;
       var ii = 1;
       var html='';
       var html1='';
       $('#add').click(function() {
           i++;

           html='<tr id="row'+i+'">';
           html += '<td><select name="um_c_id[]"> <option value="">Sel.</option><?php echo um_list(); ?></select></td>';
           html += '<td><input type="text" name="qt_c[]" id="name" placeholder="Qt" class="form-control name_list" /></td>';
           html += '<td><input type="text" name="costo[]" id="name" placeholder="Costo" class="form-control name_list" /></td>';
           html += '<td><input type="text" name="rif[]" id="name" placeholder="Rif." class="form-control name_list" /></td>';
           html += '<td><button name="btn_remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td>';
           html += '</tr>';
           $('#dynamic_field').append(html);
      
       });
  
       $('#add1').click(function() {
           ii++;
           html1='<tr id="row'+ii+'">';
           html1 += '<td><select name="um_c_id[]"> <option value="">Sel.</option><?php echo um_list(); ?></select></td>';
           html1 += '<td><input type="text" name="qt[]" id="qt" placeholder="Qt" class="form-control name_list" /></td>';
           html1 += '<td><input type="text" name="lung[]" id="lung" placeholder="Lung." class="form-control name_list" /></td>';
           html1 += '<td><input type="text" name="largh[]" id="largh" placeholder="Largh." class="form-control name_list" /></td>';
           html1 += '<td><input type="text" name="alt[]" id="alt" placeholder="Alt." class="form-control name_list" /></td>';
           html1 += '<td><input type="text" name="peso[]" id="peso" placeholder="Peso" class="form-control name_list" /></td>';
            html1 += '<td><select name="destina[]"> <option value="">Sel.</option><?php echo clienti_list(); ?></select></td>';
           html1 += '<td><input type="text" name="consegna[]" id="consegna" placeholder="Consegna" class="form-control name_list" /></td>';
           html1 += '<td><input type="text" name="contr[]" id="contr" placeholder="Entra" class="form-control name_list" /></td>';
           html1 += '<td><input type="text" name="note[]" id="note" placeholder="Entra" class="form-control name_list" /></td>';
           html1 += '<td><button name="btn_remove1" id="'+ii+'" class="btn btn-danger btn_remove1">X</button></td>';
           html1 += '</tr>';
           $('#dynamic_field2').append(html1);
           });  
      
       $(document).on('click', '.btn_remove', function(){
           var button_id = $(this).attr("id");
           $('#row'+button_id+'').remove();
       });

       $(document).on('click', '.btn_remove1', function(){
           var button_id = $(this).attr("id");
           $('#row'+button_id+'').remove();
       });
  
       $('#submit').click(function(){
           $.ajax({
               url:"salva_dati.php",
               method:"POST",
               data:$('#add_name').serialize(),
               success:function(data)
               {  alert(data);
                   $('#add_name')[0].reset();
               }
           });
       });
   });

 

[marino51]

con codice html si crea una tabella "esterna" includendo nelle righe delle tabelle "interne"
puoi cercare esempi con "nested tables"
le tabelle sono individuate da un "id" specifico che può essere un nome + un indice
successivamente aggiusti il codice javascript per gestire le righe delle "varie" tabelle