This form contains a toggle edit feature.
<% while(resultset.next()){ %>
<form method='POST' class="formfield" action='EditCompany'>
<tbody>
<tr align='center' class='form'>
<td><%= no %><input type='hidden' class='form_id_data' name='form_id_data' value='<%= resultset.getString(1)%>'></td>
<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(2)%>' name='company_name'></td>
<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(3)%>' name='city'></td>
<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(4)%>' name='state'></td>
<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(5)%>' name='zipcode'></td>
<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(6)%>' name='branch'></td>
<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(7)%>' name='address'></td>
<td>
<a class="edit"><span class='glyphicon glyphicon-pencil'></span></a>
<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
<a class="cancel"><span class='glyphicon glyphicon-remove'></span></a>
<td><a href="#" data-href="DeleteCompany?id=<%= resultset.getString(1)%>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</form>
<% no++; } %>This section contains the JavaScript toggle feature for the Edit, Save, and Cancel buttons.
<!-- Toggle Edit -->
<script>
$('.edit').click(function() {
$(this).hide();
$('.form').find('.aaa').attr('disabled',true);
$(this).closest('tr').find('.aaa').attr('disabled',false);
$(this).siblings('.save, .cancel').show();
});
</script>
<script>
$('.cancel').click(function() {
$('.form').find('.aaa').attr('disabled',true);
$(this).siblings('.edit').show();
$(this).siblings('.save').hide();
$(this).hide();
});
</script>
<!-- Modal Edit Alert Script class Save-->
<script type="text/javascript">
$('#submit').click(function(){
$('.formfield').submit();
});
</script>There is an issue with the toggle edit. When I click edit on the first row, the 'Save' button remains visible even when editing the second row. Here is an example:
https://i.sstatic.net/uPpP0.png
How can I get the 'Save' button in the first row to revert back to the edit button?