title: How to add dynamic fields using a counter to limit the number of fields in jQuery
body: <p>Here is the fiddle link</p>
  
  <p><a href="http://jsfiddle.net/gKJEs/80/" rel="nofollow">http://jsfiddle.net/gKJEs/80/</a></p>
  
  <p>I need a counter to stop the number of rows being added. lets say till 5.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;table id="table"&gt;&lt;/table&gt;
  &lt;button id="addRowBtn"&gt;Add Row&lt;/button&gt;
  </code></pre>
  
  <p>Script: </p>
  
  <pre><code>$(function () {    
      var tbl = $("#table");    
      $("#addRowBtn").click(function () {    
          $("&lt;tr class='tre'&gt;&lt;td&gt;Lorem Ipsum&lt;/td&gt;&lt;td&gt;Lorem Ipsum&lt;/td&gt;&lt;td&gt;Lorem Ipsum&lt;/td&gt;&lt;td&gt;Lorem Ipsum&lt;/td&gt;&lt;td&gt;&lt;button class='delRowBtn'&gt;Delete&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;").appendTo(tbl);      
      });
  
      $('#sd').click(function () {
          $('.tre').hide();
      });
  
      $(document.body).delegate(".delRowBtn", "click", function () {
          $(this).closest("tr").remove();
      });    
  
  });
  </code></pre>