JQuery clone () value input function

Question

I created a clone function to clone a set of elements. I managed to get the basics of the clone function. CLICK HERE I have an error in this function. When a user enters text in an input field, he clones the last text entered and changes the text value for all cloned elements.

$('.add-item').on('click', function() {
  var value = $('input').val();
  if ($('#items-field').val()) {
    $('.list-items p').text(value)
    $('.list-items:first').clone().appendTo("#items").addClass('isVisible');
    $('input').val('');
    event.preventDefault();
  }
})

Does anyone know how this problem can be solved?

Answer 1

Clear the value of the inputs after clone(). You can use the method find()to get all the inputs inside the cloned element.

var c = $('.list-items:first').clone();
c.find("input").val("");  // find all inputs and clear
c.appendTo("#items").addClass('isVisible');

Here is a working jsbin example

, p. p div.

$(function(){

  $('.add-item').on('click', function(e) {
     event.preventDefault();
     var value = $('#items-field').val();
     if (value!="") {

       var c = $('.list-items:first').clone();
       c.find("input").val("");  // find all inputs and clear
       c.appendTo("#items").addClass('isVisible');

       c.find("p").text(value);

     }
  });

}) 

-