javascript ajouter un nouveau formulaire

Lorsque vous ajoutez l'élément à la page, il n'hérite pas de la fonction on 'change' que vous Vous avez également id = "produse" et vous aurez des ID en double ... Changez ceci en class = "produse" au lieu de id! Ce que vous devez faire est d'envelopper ceci dans une fonction ...

$("#addMore").click(function(){   
    var rows = $(".produse").length,
    newRowNumber = rows + 1
    $(".row-fluid:last").clone().appendTo(".wrapper")
    // make sure all of the rowNumber attributes = newRowNumber here
    initiateProduse() // add the effect to new row
});

Maintenant, il y aura toujours des problèmes ... Tous les effets de show "#Modele ...." ne seront pas fonctionnent car il y a des ID en double. Vous avez besoin d'un moyen de spécifier QUEL élément vous devez utiliser ...

Je recommande des attributs. Vous pouvez donner à chaque sélection / entrée une valeur comme ModeleCanapele = "1", puis quand une deuxième ligne est ajoutée, elle aura ModeleCanapele = "2"

Ensuite, vous feriez quelque chose comme ... p >

var rowNumber = $(this).attr('rowNumber')
$('[sub_select_class="'+rowNumber+'"]').hide(); // change to attribute instead of class select 
switch(value) { // we show only what needs to be visible
           case 'Canapele':
             $("[ModeleCanapele='"+rowNumber+"']").show();
             break;

Vous pouvez suivre le rowNumber en faisant quelque chose comme ...

<select class="produse" rowNumber="1"> 

pour le premier ...

et à l'intérieur de la nouvelle fonction que vous utilisez, vous pouvez faire ...

$("[ModeleCanapele='"+newRowNumber+"']").show(); 

Pour définir le NOUVEAU numéro de ligne, nous ferions quelque chose comme ça ...

$("#addMore").click(function(){   
    $(".row-fluid:last").clone().appendTo(".wrapper"); 
    initiateProduse() // add the effect to new row
});
    function initiateProduse(){
     $(".produse").off("change"); // remove on change effects so it doesn't have double on change effects on existing rows...
     $(".produse").change(function(){
        var $this = $(this), value = $this.val(); // save value
        $('.sub_select_class').hide(); // we hide every second select
        switch(value) { // we show only what needs to be visible
           case 'Canapele':
             $("#ModeleCanapele").show();
             break;
           case 'Coltare':
             $("#ModeleColtare").show();
             break;
             case 'Mobila':
             $("#ModeleMobila").show();
             break;
             case 'Fotolii':
             $("#ModeleFotolii").show();
             break;
             case 'Seturi':
             $("#ModeleSeturi").show();
             break;
           // ...etc
        }
     });
    }

    initiateProduse() // initiate the change effect on page load

Je n'ai pas assez de temps pour faire tout le code pour vous, mais voici comment vous pouvez le faire. Vous devez vous assurer que chaque sélection / entrée a un attribut et un identifiant de classe au lieu d'un ID et vous assurer que le numéro de ligne est ajouté (+1) chaque fois que vous ajoutez une ligne

Un moyen beaucoup plus simple serait pour inclure réellement le modèle HTML dans le JS afin que vous puissiez utiliser une variable pour définir le nouveau numéro de ligne à chaque fois (au lieu d'utiliser le clonage)

1. Les identifiants doivent être uniques. Utilisez une classe
2. Vous devez déléguer les gestionnaires d'événements lorsque vous insérez du contenu dynamique
3. SEC, ne vous répétez pas

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="row-fluid">
    <table style="font-size:10px">
      <tbody>
        <tr>
          <td>
            <select class="Volum">
              <option value="1x ">1x </option>
              <option value="2x ">2x </option>
              <option value="3x ">3x </option>
              <option value="4x ">4x </option>
              <option value="5x ">5x </option>
              <option value="6x ">6x</option>
            </select>
          </td>
          <td>
            <select class="produse">
              <option value="reset">Selecteaza Produs</option>
              <option value="Coltare">Coltare</option>
              <option value="Seturi">Seturi</option>
            </select>
          </td>
          <td>
            <select class="ModeleColtare sub_select_class">
              <option value="Coltar Vera">Coltar Vera</option>
              <option value="Coltar Onix">Coltar Onix</option>
              <option value="Coltar Olyve">Coltar Olyve</option>
              <option value="Coltar Adrian">Coltar Adrian</option>
            </select>
          </td>
          <td>
            <select class="ModeleSeturi sub_select_class">
              <option value="Set Dana">Set Dana</option>
              <option value="Set Ramona">Set Ramona</option>
              <option value="Set Gina">Set Gina</option>
              <option value="Set Olyve">Set Olyve</option>
            </select>
          </td>
          <td>
            Alte Detalii: <textarea rows="1" style="width:120px;"></textarea> Pret: <input type="text" size="3" /> </td>
          <td>
            <button class="filter" name="filter">Reset</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div>
  <button id="addMore" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Add Row</button></div>

.sub_select_class {
  display: none;
}

.new-rect {
  background: black;
  width: 100%;
  height: 30px;
}

function resetFunction() { // not sure what you want here? 
  $(this).closest(".row-fluid").remove(); 
}

$(function() {
  $("#addMore").click(function() {
    var $clone = $(".row-fluid:last").clone(true)
    $('.sub_select_class',$clone).hide(); // we hide every second select    
    $clone.appendTo(".wrapper");
  });

  $(".row-fluid").on("click",".filter", resetFunction);

  $(".row-fluid").on("change", ".produse", function() {
    var value = $(this).val(), // save value
        $parent = $(this).closest(".row-fluid");
    $('.sub_select_class',$parent).hide(); // we hide every second select
    $(".Modele" + value,$parent).show();
  });
});