Removing duplicate field jquery

Question

I have a page where the fields can be multiple.

At first, my code was working when I only had 1 add and one remove button. When I decided to have a remove button beside every appended field, my jquery function doesn't work anymore.

I've tried adding the 'on', and changing my code to $this.parent().remove() but it's still not working.

Here's my HTML:

   <div class="row" id="ph>
   <span class="section">General Information</span>
       <label> <h3> Project Head </h3> </label>
   </div>


    <div class= "row">
        <div class="col-md-3 col-sm-3 col-xs-12 form-group"></div>
        <div class="col-md-3 col-sm-3 col-xs-12 form-group"></div>
        <button id="addc" type ="button" class ="btn btn-default">Add</button>
   </div>

Here's my code for the append and remove:

$("#ph").append($('<div class="col-md-12 col-sm-12 col-xs-12" id="ne"><div class="row"><div class="col-md-3 col-sm-3 col-xs-12 form-group"> <input class="phname form-control has-feedback-left" name="phname[' + numberIncr + ']" placeholder="Name" type="text"/><span class="fa fa-user form-control-feedback left" aria-hidden="true"></span></div> <div class="col-md-3 col-sm-3 col-xs-12 form-group"><input class="phnum form-control has-feedback-right" name="phnum[' + numberIncr + ']" placeholder="Contact Number" /><span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span></div></div></div>'));

  $("#addc").on('click', function () {
       numberIncr++;
       var temp = $("#ph").append($('<div class="col-md-12 col-sm-12 col-xs-12" id="new"><div class="row"><div class="col-md-3 col-sm-3 col-xs-12 form-group"> <input class="phname form-control has-feedback-left" name="phname[' + numberIncr + ']" placeholder="Name" /><span class="fa fa-user form-control-feedback left" aria-hidden="true"></span></div> <div class="col-md-3 col-sm-3 col-xs-12 form-group"><input class="phnum form-control has-feedback-right" name="phnum[' + numberIncr + ']" placeholder="Contact Number" /><span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span></div><button id="remc" type ="button" class ="btn btn-default">Remove</button></div></div>'));  

      $(".phname").each(function(){
        $(this).rules( "add", {
        required:true,
        lettersonly: true,
      messages: {
        required: 'Enter project head name',
        lettersonly:'Alphabetic characters only'
      }
    });
      });

      $(".phnum").each(function(){
        $(this).rules( "add", {
        required: true,
        maxlength: 11,
        minlength: 11,
      messages: {
        required: 'Enter project head contact number',
        maxlength: 'Invalid contact number',
        minlength: 'Invalid contact number'
      }
    });
      });

    });


 $("#remc").on('click', function () {
        var v= document.getElementById("new");
        v.remove();
  });