javascript добавить новую форму

Вы используете идентификаторы. Попробуйте заменить их на классы. Когда jQuery применяет селектор для id, это всегда будет только один элемент.

Когда вы добавляете элемент на страницу, он не наследует функцию on 'change'. У вас также есть id = "produse", и у вас будут дублирующиеся идентификаторы ... Измените это на class = "produse" вместо Я бы! Что вам нужно сделать, это обернуть это в функцию ...

$("#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

Теперь все еще будут проблемы ... Все эффекты шоу "#Modele ...." не будут работать, потому что есть повторяющиеся идентификаторы. Вам нужен способ указать, какой элемент вам нужно использовать ...

Я рекомендую атрибуты. Вы можете дать каждому select / input значение, например ModeleCanapele = "1", а затем, когда будет добавлена ​​вторая строка, будет ModeleCanapele = "2"

Тогда вы сделаете что-то вроде ...

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

Вы можете отслеживать rowNumber, выполнив что-то вроде ...

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

для первого ...

и внутри новой функции, которую вы используете, вы можете сделать ...

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;

Чтобы установить НОВЫЙ номер строки, мы бы сделали что-то вроде этого ...

$("#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
});

У меня недостаточно времени, чтобы сделать весь код для вас, но это то, как вы можете это сделать. Вы должны убедиться, что каждый отдельный выбор / вход имеет атрибут & amp; идентификатор класса вместо идентификатора & amp; убедитесь, что номер строки добавляется (+1) каждый раз, когда вы добавляете строку

Намного проще было бы фактически включить шаблон HTML в JS, чтобы вы могли использовать переменную для установки нового номера строки каждый раз (вместо использования клона)

1. ID должны быть уникальными. Используйте класс
2. Вам нужно делегировать обработчики событий, когда вы вставляете динамический контент
3. DRY, не повторяйте себя

.sub_select_class {
  display: none;
}

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

<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>