Date picker not working on appended div using after()

Question

My html talbe is as follows

<table width='1200' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>Date</td>
    <td>
    <li class='demo'><div class='box'>
          <input type='text' id='from-input' maxlength='10'>
          </div>
          <div class='code-box' style='display:none;'>
          <pre class='code prettyprint'>
$('#from-input').multiDatesPicker();
                            </pre>
                        </div>
                    </li></td>
  </tr>
</table>

And my jquery script is as follows.

   $(document).ready(function(){
        var counter =2;
        $("#addButton2").click(function () {

    var newTextBoxDiv2 = $(document.createElement('div')).attr("id", 'TextBoxDiv2' + counter2);

    newTextBoxDiv2.after().html('<table width='1200' border='0' cellspacing='0' cellpadding='0'><tr><td>Date</td><td><li class='demo'><div class='box'><input type='text' id='from-input'+counter+'' maxlength='10'></div><div class='code-box' style='display:none;'><pre class='code prettyprint'>$('#from-input'+counter+'').multiDatesPicker();</pre></div></li></td></tr></table>');

newTextBoxDiv2.appendTo("#TextBoxesGroup2");
    counter++;
    });

A button <input type='button' value='Add' id='addButton2'> ,When click the button the same copy of the html page is append to a div in the html page. Thera is an input field with id from-input and a jquery function $('#from-input').multiDatesPicker(); in the html page. the id from-input is changed by attatching the counter on each click. The values generated are like from-input2, from-input3, from-input4 and so on. It is the date picker. The date picker is not working inside the appended tables generated onclick. any help will be appreciated.Thank You

Answer 1

First your code is few issues, Any way try this,

JsFiddle Example

$(function() {
   var counter =2;
        $("#addButton2").click(function () {

    var newTextBoxDiv2 = $(document.createElement('div')).attr("id", 'TextBoxDiv2' + counter);

    newTextBoxDiv2.after().html("<table width='1200' border='0' cellspacing='0' cellpadding='0'><tr><td>Date</td><td><li class='demo'><div class='box'><input class='multi' type='text' id='from-input_"+counter+"' maxlength='10'></div><div class='code-box' style='display:none;'>$('#from-input').multiDatesPicker();<pre class='code prettyprint'></pre></div></li></td></tr></table>");

newTextBoxDiv2.appendTo("#TextBoxesGroup2");
            $("#from-input_"+counter).multiDatesPicker();
    counter++;

    });

  });