title: create div dynamically by passing css id and class to jquery method
body: <p>I have div which needs to be repeated(create dynamically) on  a button click.i have a working code,but it needs to be used many places across pages so i would like to make it a generic one,like i need to pass only particular div id as an input parameter to that method.</p>
  
  <pre><code>function textbox_add(id){
    console.log(id)
    var counter = 0;
    $('#'+id).on('click','.newField', function () {
      console.log(counter);
      if(counter &gt;= 3){
        alert("Reached Maximum");
        return false
      }
      var newthing=$('div.addNew:first').clone().find('.newField').removeClass('newField').addClass('remove').val('Remove Field!').end();
      $('#'+id).append(newthing);
      counter++;
    });
    $('#'+id).on('click','.remove', function () {
      if (counter == 0)
      {
        return false
      }
      $(this).parent().remove();
      counter--;
  
  });
  }
  </code></pre>
  
  <p>if i use it outside the method it works perfect.The goal is to create 4 text boxes dynamically and if i remove it should remove one by one.</p>
  
  <p>here is my fiddle 
  <a href="http://jsfiddle.net/xdsacvdm/" rel="nofollow">Demo</a></p>
  
  <p>Issues facing  when i place inside method are:</p>
  
  <ol>
  <li>On first click it creates single div on second click it creates two div's then continues for further click's.</li>
  <li>On clicking remove it works like create.</li>
  <li>when i click new again it creates the total of removed,created(earlier) all the div's.</li>
  </ol>
  
  <p>I am not able to find where am missing.</p>