jQuery replaceWith Inside Loop malfunction

Question

So here's what i was trying to do. if I click on update button, the text on the left side will be an INPUT box like below: Click the update button and the text on the left will be an input box

BUT what's really happening is all the text on the left side is getting replaced with INPUT box, image here: all text left side is affected

how do I use a unique id or something? sorry I'm new to this jQuery stuff. And can you please explain how I can edit the table affected on MySQL?

code here:

<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>

Answer 1

Put same class in all edit button. Remove the edit id. Remember IDs are unique.Try something like this:

https://jsfiddle.net/v2bxdttz/

use

$(this).closest('tr').find('.editable').each(function() {

instead of

 $(document).find('.editable').each(function() {