Doppelte div außerhalb des aktuellen div

Question

Problem

Ich versuche, ein div zu klonen, wenn ein Benutzer die Schaltfläche hinzufügen klicken. Das Problem ist, dass ich gerade das Div innerhalb des aktuellen klonen. Ich möchte es dem Divider .wrapper hinzufügen, aber das schlägt fehl. Ich habe schon ein paar andere Dinge wie appendTo ('. Wrapper') versucht, aber ohne Erfolg.

Sie können sehen, wenn Sie auf die Schaltfläche Hinzufügen klicken, ist die Einrückung aus den Feldern, die geklont werden, nicht korrekt.

Beispielhttps://jsfiddle.net/duikboot/1sakxpzq/

-Code, wo ich den Klon tun:

var pd = $('.product_data').last().clone(); 
var id_count = 0; 

$(document).on('click', '.add_item', function() { 
    var clone = pd.clone().prop('id', 'product_' + id_count); 
    $(this).prevAll('.product_data').first().append(clone.hide()); 
    clone.slideDown('fast'); 
    id_count++; 
}); 

Vielen Dank für alle Hilfe.

Answer 1

.append() und der Inhalt im ausgewählten Container als letztes Kind. Sie müssen .after() verwenden, um Inhalte als nächstes Geschwister hinzu:

$(document).on('click', '.add_item', function() { 
    var clone = pd.clone().prop('id', 'product_' + id_count); 
    $(this).prevAll('.product_data').first().after(clone.hide()); 
    clone.slideDown('fast'); 
    id_count++; 
}); 

Working Demo

Answer 2

ersetzen nur first() von parent() in Ihrem Klick-Ereignisse, weil Sie sich beziehen .product_data Klasse und nicht auf die .wrapper Elternklasse

$(document).on('click', '.add_item', function() { 
    var clone = pd.clone().prop('id', 'product_' + id_count); 
    $(this).prevAll('.product_data').parent().append(clone.hide()); 
    clone.slideDown('fast'); 
    id_count++; 
});