Remove field not working as expected - jquery-ui

Question

I have a code that adds or removes fields when clicked, but when i bound it in a c:foreach tag, it shows unexpected behaviour, as instead of showing a remove field it shows an add field with textfield when i load the data from backend?
<script>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="parameter_value" size="50" style="width: 50%;; margin-left: 3%;" class="headers " value="${workflow.parameter_value}" /> Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
});
});
</script>
<table>
<tr>
<td class="tbody_color">
<div class="input_fields_wrap">
<c:if test="${not empty workflow.workflowParametersList}">
<c:forEach var="paramValue" items="${workflow.workflowParametersList}">
<input type="text" name="parameter_value" size="50" style="width: 50%;; margin-left: 13%;" class="headers" value="${paramValue.param_value}"></input>
<button class="add_field_button bttn">Add Parameters</button>
</c:forEach>
</c:if>
<c:if test="${empty workflow.workflowParametersList}">
<input type="text" name="parameter_value" size="50" style="width: 50%;; margin-left: 13%;" class="headers" value=""></input>
<button class="add_field_button bttn">Add Parameters</button>
</c:if>
</div>
</td>
</tr>
</table>

Answer 1

You have Add Parameters button insted of Remove in your c:forEach tag which displays backend data.
Change this to:
<c:if test="${not empty workflow.workflowParametersList}">
<c:forEach var="paramValue" items="${not empty workflow.workflowParametersList}">
<div>
<input type="text" name="parameter_value" size="50" style="width: 50%;; margin-left: 13%;" class="headers" value="${paramValue}"></input>
Remove
</div>
</c:forEach>
</c:if>