Question

I am trying to clone a row into content by creating unique ID yet I am facing some issues.

HTML:

<div class="content">
    <div id="email-container" class="email-container">
            <input type="text" value="" placeholder="Email">
            <input type="text" value="" placeholder="Email">
            <input type="text" value="" placeholder="Email">
            <span class="plus-button">+</span>
        </div>
</div>

JavaScript:

$('.plus-button').click(function(){
    $('.email-container').clone().insertAfter(".email-container").end();
    $('.email-container').find('.plus-button').text('-').not(':last-child');
});

​
Please find my fiddle below:

http://jsfiddle.net/meetravi/GCRVS/3/

I am trying to clone #email-container and add it inside .content with clearing the textbox values and also need to change the .plus-button value to “-” except the last row.

Answer 1

<div class="content">
    <div id="email-container" class="email-container">
        <input class="1" type="text" value="" placeholder="Email">
        <input class="1" type="text" value="" placeholder="Email">
        <input class="1" type="text" value="" placeholder="Email">
        <span class="plus-button">+</span>
    </div> 
</div>

$(document).ready(function()
{
    $('.plus-button').click(AddNewRow);
});

function AddNewRow(event)
{
   var clone = $('.email-container').last().clone().appendTo('.content');
   clone.children('.1').val(''); //delete all values of your clone
   clone.children('.plus-button').bind('click', AddNewRow);

   var btn = $(this).parent().find('.plus-button');  //The cloned button
   btn.text('-');
   btn.removeClass('plus-button');
   btn.addClass('minus-button');
   btn.unbind('click');  //unbind the "old" click event
   btn.click(RemoveRow);
}


function RemoveRow(event)
{
    $(this).parent().remove();
}

This should do the trick.
TIPP: When you are creating new elements in your DOM you should bind the item manually or use “on”

EDIT: Removed .live() because of its deprecation