jQuery seltsam Bootstrap Zeile Klonen Verhalten

Question

Mein Ziel ist Klonen in der Bootstrap-Zeile in meinem Formular, um Eingaben vom Benutzer zu sammeln. Grundsätzlich ist es genau das gleiche wie this thread. Aber aus irgendeinem Grund habe ich seltsames Verhalten beim Klonen, und ich bin jetzt wirklich verblüfft.

Dies ist das DOM, die ich habe:

<div class="cloned-row"> 
    <div class="row" id="row_1"> 
     <div class="col-md-12"> 
      <div class="form-group"> 
       // some inputs here 
      </div> 
     </div> 
    </div> 
    <div class="row" id="row_2"> 
     <div class="col-md-12"> 
      <div class="form-group"> 
       // some inputs here 
      </div> 
     </div> 
    </div> 
</div> 

ich die Liste Kind von .cloned-row am Klonen (die die Zeile mit der ID in diesem Fall row_2) und als dritte Reihe machen wollen. (Ich werde auch die ID ändern, nachdem die Zeile geklont wurde, aber das wird später sein, da ich immer noch Probleme mit dem Klon habe). Aber aus irgendeinem Grund klont mein Klon jQuery Code beide Zeilen. Also nach dem Klon wird es 4 Zeilen. Unten ist ein Teil meiner jQuery Klon:

$(document).on('click', '#plus_now', function(){ 
    $(".cloned-row:last").clone().insertAfter(".cloned-row:last"); 
}); 

zur Führung von jemandem auf dieser Suche. Das ist völlig unerwartet. Schätze es, danke.

Answer 1

Sie klonen die ganze .cloned-row Element - versuchen:

$(document).on('click', '#plus_now', function(){ 
    $(".cloned-row .row:last-child").clone().insertAfter(".cloned-row .row:last-child"); 
}); 

So zu klonen nur das letzte Element .row

Answer 2

Sie klonen die letzten .cloned-row (siehe https://api.jquery.com/last-selector/). Versuchen

$(document).on('click', '#plus_now', function(){ 
    $(".row:last").clone().insertAfter(".row:last"); 
});