Add event listener to trigger the same function to dynamically created button
<p>I have this jquery code,</p>

<pre><code> var next = 1;
$(".add-more").click(function(e){
    e.preventDefault();
    $(this).replaceWith("&lt;button id='remove" + (next) + "' class='btn btn-danger remove-me pull-right'&gt;-&lt;/button&gt;");
    var addto = "#field" + next;
    next = next + 1;
    var str = "&lt;tr id='field" + next + "'&gt;&lt;td&gt;&lt;input autocomplete='off' class='input form-control' id='item" + next + "' name='item" + next + "' type='text' data-items='8'/&gt;&lt;/td&gt;"+
                "&lt;td&gt;&lt;input autocomplete='off' class='input form-control' id='desc" + next + "' name='desc" + next + "' type='text' data-items='8'/&gt;&lt;/td&gt;"+
                "&lt;td&gt;&lt;input autocomplete='off' class='input form-control' id='qty" + next + "' name='qty" + next + "' type='text' data-items='8'/&gt;&lt;/td&gt;"+
                "&lt;td&gt;&lt;input autocomplete='off' class='input form-control' id='ucost" + next + "' name='ucost" + next + "' type='text' data-items='8'/&gt;&lt;/td&gt;"+
                "&lt;td&gt;&lt;input autocomplete='off' class='input form-control' id='tcost" + next + "' name='tcost" + next + "' type='text' data-items='8'/&gt;&lt;/td&gt;"+
                "&lt;td&gt;&lt;input autocomplete='off' class='input form-control' id='type" + next + "' name='type" + next + "' type='text' data-items='8'/&gt;&lt;/td&gt;"+
                "&lt;td&gt;&lt;button id='b1' class='btn add-more pull-right' type='button'&gt;+&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;";
    $(addto).after(str);
    $("#count").val(next); 
    $('.remove-me').click(function(e){
            e.preventDefault();
            var fieldNum = this.id.charAt(this.id.length-1);
            var fieldID = "#field" + fieldNum;
            $(this).remove();
            $(fieldID).remove();
    });
});
</code></pre>

<p>This lines of codes make a user able to create multiple fields.
If the user click the "Add" Button, it will create multiple fields.
This will also change the "Add" button to "Remove" button. And add another "Add " button. </p>

<p>My problem here is, the dynamically created #b1 button don't have event listener.</p>

<p>I tried to use this line of code,</p>

<pre><code>$("#field" + next).attr('data-source',$(addto).attr('data-source'));
</code></pre>

<p>but it is not working. My idea is like this one,</p>

<p><a href="http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove" rel="nofollow">http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove</a></p>

<p>Anyone can help me?</p>