Adding multiple field in different rows(only one button is working to add field and rest are not working)

Question

enter image description here

<script> 
//[adding button][1] 
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++; 
          $('#dynamic_field').append('<tr id="row'+i+'"><td><input value="<?php echo $c['date']; ?>" type="date" class="form-control" name="date[]" ></td>
<td><input value="<?php echo $c['text']; ?>" type="text" class="form-control" name="text[]"></td>
<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button><button type="button" name="save" id="'+i+'" class="btn btn-primary btn_save">save</button></td></tr>');  
       });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
    
});  
 </script>


  

only one button is working to add field and rest are not working