jQuery clone() input value function

Question

I have created a clone function to clone a selection of elements. I have managed to get the basics of the clone function working. CLICK HERE I have a bug in this function. When the user types text into the input field, it clones the last inputted text and changes the text value for all cloned items.

$('.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 resolved?

Answer 1

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

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 sample

Also, In your code, you are reading the input value and setting it to all the p tags's text. You should be setting it only to the p tag of the cloned 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);

     }
  });

}) 

Here is a working sample of the complete solution