title: Add new row with select box, text box and Twitter Bootstrap calendar
body: <p><img src="https://i.stack.imgur.com/ixxB6.png" alt=""></p>
  
  <p>This is what I'm trying to do:</p>
  
  <ol>
  <li>Have a add button where it will add a row with Author Name (this will be fetched from the database), Percentage level (text box) and Bootstrap Calendar (using Twitter Bootstrap)</li>
  <li>Have all the values posted to the next page i.e <code>process.php</code> where it will get stored in the database.</li>
  </ol>
  
  <p>My current code:</p>
  
  <pre><code>$(document).ready(function () {
      var counter = 1;
      $("#add_row").click(function () {
          new_elem = $("#addr_template").clone().appendTo("#container tbody")
                     .show().attr("id", "addr" + counter);
          counter += 1;
      });
  });
  </code></pre>
  
  <p>Now, with the above code (fiddle) I'm able to add multiple row with a button click, I have two problems:</p>
  
  <ol>
  <li>The bootstrap calendar is not working in the jQuery AJAX load (button click).</li>
  <li>All the values are not getting post to the next page.</li>
  </ol>
  
  <p><a href="http://jsfiddle.net/8PduS/" rel="nofollow noreferrer"><strong>Fiddle</strong></a></p>