Trying to make it so that when the update button is clicked, the text on the left side becomes an input box:
Click the update button and the text on the left will be an input boxHowever, instead of just one input box appearing, all the text on the left side is being replaced with INPUT boxes: all text left side is affected
New to jQuery and not sure how to use a unique id to prevent this. Also seeking guidance on editing the affected table in MySQL.
Code snippet:
<table class="table no-margin">
<thead>
<tr>
<th width="250px">Category</th>
<th width="20px"> </th>
<th width="20px"> </th>
</tr>
</thead>
<tbody>
<?php
while ($rows = mysql_fetch_array($result)) {
$tcategory = $rows['vCategory'];
$cid = $rows['id'];
?>
<tr>
<td>
<?php echo '<div class="editable">'. $tcategory .' </div>'; ?>
</td>
<td><button id="edit" class="btn btn-block btn-xs btn-success"> Update</button> </td>
<td><button class="btn btn-block btn-xs btn-danger"> Delete</button> </td>
<?php
}
?>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#edit").click(function() {
var $this = $(this);
if($this.attr('editing') != '1') {
$this.text('Save').attr('editing', 1);
$(document).find('.editable').each(function() {
var input = $('<input class="editing" />').val($(this).text());
$(this).replaceWith(input);
});
}else {
$this.text('Update').removeAttr('editing');
$(document).find('input.editing').each(function() {
var div = $('<div class="editable" />').text($(this).val());
$(this).replaceWith(div);
});
}
});
</script>
</tr>
<form>
<tr>
<td><input type="text" class="form-control" name="addCategory" placeholder="Enter New Category"></td>
<td><input type="submit" class="btn btn-block btn-sm btn-success" value="Add"></td>
</tr>
</form>
</tbody>
</table>