Could not remove using parent div id in Jquery - php

Question

I facing one issue. I need to remove total div using the id in Jquery while clicking on minus button. I am explaining my code below.
<?php foreach($module as $item){ ?>
<div id="planWithfriends<?php echo $item->id; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">PLAN WITH FRIENDS</h4>
</div>
<div class="modal-body">
<form class="row" action="" method="POST">
<div class="input_fields_wrap<?php echo $item->id; ?>">
<div id="parentid<?php echo $item->id; ?>">
<div class="form-group col-md-4">
<label class="go-right" style="margin-bottom:0px;">Email </label>
<input name="email_<?php echo $item->id; ?>[]" id="email_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;">
</div>
<div class="form-group col-md-4">
<label class="go-right" style="margin-bottom:0px;">Phone </label>
<input name="phone_<?php echo $item->id; ?>[]" id="phone_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;">
</div>
<div class="form-group col-md-4">
<button type="button" class="add_button_<?php echo $item->id; ?> btn btn-success" style="height:34px;margin-top: 20px;"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<div class="clear"></div>
<div class="form-group col-md-12 text-right">
<button style="margin-top:25px;" type="button" class="btn btn-action" data-dismiss="modal" id="planbutton<?php echo $item->id; ?>">Submit</button>
</div>
<div class="clear"></div>
</form>
</div>
<!--<div class="modal-footer" style="text-align:center;">
<button type="button" class="btn btn-action" data-dismiss="modal">Close</button>
</div>-->
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var addButton = $('.add_button_<?php echo $item->id; ?>');
var wrapper = $('.input_fields_wrap<?php echo $item->id; ?>');
$(addButton).click(function(){
$(wrapper).append('<div id="parentid<?php echo $item->id; ?>"><div class="form-group col-md-4"><input name="email_<?php echo $item->id; ?>[]" id="email_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><input name="phone_<?php echo $item->id; ?>[]" id="phone_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><button type="button" class="remove_field<?php echo $item->id; ?> btn btn-danger" style="height:34px;margin-top: 20px;"><i class="fa fa-minus"></i></button></div></div>'); //
})
$(wrapper).on('click', '.remove_field<?php echo $item->id; ?>', function(e){
e.preventDefault();
$(this).parent('#parentid<?php echo $item->id; ?>').remove();
})
})
</script>
<?php } ?>
Here I creating another row clicking on + button but when user will click on - button the respective row should remove which is not happening in my case. Please help me to resolve this issue.

Answer 1

As I have seen you put JavaScript code inside the loop. Please put it outside the loop as:
<script type="text/javascript">
$(function(){
var addButton = $('.add_button');
var wrapper = $('.input_fields_wrap');
$(addButton).click(function(){
$(wrapper).append('<div id="parentid"><div class="form-group col-md-4"><input name="email_<?php echo $item->id; ?>[]" id="email_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><input name="phone_<?php echo $item->id; ?>[]" id="phone_<?php echo $item->id; ?>" type="text" class="form-control input_style1" placeholder="" value="" style="height:34px;"></div><div class="form-group col-md-4"><button type="button" class="remove_field<?php echo $item->id; ?> btn btn-danger" style="height:34px;margin-top: 20px;"><i class="fa fa-minus"></i></button></div></div>'); //
})
$(wrapper).on('click', '.remove_field', function(e){
e.preventDefault();
$(this).parent('.parentid').remove();
})
})
</script>
and give a class remove_field when clicking on it get parent div class and do whatever you want. This is not good practicing to put JavaScript inside the PHP loop.