Clone and insertAfter only once a time with jQuery

Question

HTML

<p class="field-other">other</p>
<p class="field-new">new</p>
<p><a class="add-new" href="#">add new</a></p>

jQuery

$('.field-new').hide();

$('.add-new').click( function() {
    $(this).parent().siblings('.field-new').clone().insertAfter('.field-new').show();
    return false;
});

Can anyone help please? So one click on ".add-new" to add only one new field ".field-new". Thanks.

Answer 1

You can either use .first() or .prev() method:

$(this.parentNode).siblings('.field-new')
                  .first()
                  .clone()
                  .insertAfter('.field-new')
                  .show();

jsfiddle

or:

$(this.parentNode).prev('.field-new')
                  .clone()
                  .insertBefore(this.parentNode);

jsfiddle