title: Adding textfields works fine but removing textfields fails
body: <p>I'm working on a jQuery add/remove textfields feature. Adding textfields works fine but removing textfields seems to be a problem.</p>
  
  <pre><code>$(function () {
      var json = {
          "welcomeList": ["Thanks for coming", "Please select from the following list", "dwadwadsds"],
              "endList": ["Press come again", "Press 0"]
      };
  
      $.each(json.welcomeList, function (_, vv) {
          $('&lt;p&gt;&lt;label for="p_scnts"&gt;&lt;input type="text" class=cnt" size="20" name="p_scnt" value="' + vv + '"placeholder="Input Value" /&gt;&lt;/label&gt; &lt;a href="#" id="remScnt"&gt;Remove&lt;/a&gt;&lt;/p&gt;').appendTo('#p_scents');
      });
  
      var scntDiv = $('#p_scents');
      var i = $('#p_scents p').size() + 1;
  
      $('#addScnt').on('click', function (event) {
          $('&lt;p&gt;&lt;label for="p_scnts"&gt;&lt;input type="text" id="p_scnt_' + i + '" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /&gt;&lt;/label&gt; &lt;a href="#" id="remScnt"&gt;Remove&lt;/a&gt;&lt;/p&gt;').appendTo(scntDiv);
          i++;
          return false;
      });
  
      $('#remScnt').on('click', function () {
          alert("Hello 1");
          if (i &gt; 2) {
              $(this).parents('p').remove();
               alert("Hello 3");
              i--;
          }
          alert("Hello 2");
          return false;
      });
  });  
  </code></pre>
  
  <p>I created a <a href="http://jsfiddle.net/vishnuprasadm15/tZPg4/11043/" rel="nofollow">FIDDLE</a> for the same. Why is it not working?</p>