jQuery replaceWith Inside Loop malfunction
<p>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:
<a href="http://i.stack.imgur.com/hlw8a.png" rel="nofollow">Click the update button and the text on the left will be an input box</a></p>

<p>BUT what's really happening is all the text on the left side is getting replaced with INPUT box, image here:
<a href="http://i.stack.imgur.com/cmgAx.png" rel="nofollow">all text left side is affected</a></p>

<p>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?</p>

<p>code here:</p>

<pre><code>&lt;table class="table no-margin"&gt;
              &lt;thead&gt;
              &lt;tr&gt;
                &lt;th width="250px"&gt;Category&lt;/th&gt;
                &lt;th width="20px"&gt; &lt;/th&gt;
                &lt;th width="20px"&gt; &lt;/th&gt;
              &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
              &lt;?php 
                while ($rows = mysql_fetch_array($result)) {
                  $tcategory = $rows['vCategory'];
                  $cid = $rows['id'];
              ?&gt;
              &lt;tr&gt;
                &lt;td&gt;
                &lt;?php echo '&lt;div class="editable"&gt;'. $tcategory .' &lt;/div&gt;'; ?&gt;

                &lt;/td&gt;
                &lt;td&gt;&lt;button id="edit" class="btn btn-block btn-xs btn-success"&gt; Update&lt;/button&gt; &lt;/td&gt;
                &lt;td&gt;&lt;button class="btn btn-block btn-xs btn-danger"&gt;  Delete&lt;/button&gt; &lt;/td&gt;

                &lt;?php
                }
                ?&gt;
                &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
                &lt;script&gt;
                  $("#edit").click(function() {
                    var $this = $(this);
                    if($this.attr('editing') != '1') {
                      $this.text('Save').attr('editing', 1);
                      $(document).find('.editable').each(function() {
                        var input = $('&lt;input class="editing" /&gt;').val($(this).text());
                        $(this).replaceWith(input);
                      });
                    }else {
                      $this.text('Update').removeAttr('editing');
                      $(document).find('input.editing').each(function() {
                        var div = $('&lt;div class="editable" /&gt;').text($(this).val());
                        $(this).replaceWith(div);
                      });
                    }
                  });
                &lt;/script&gt;
                &lt;/tr&gt;
                &lt;form&gt;
                &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" class="form-control" name="addCategory" placeholder="Enter New Category"&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="submit" class="btn btn-block btn-sm btn-success" value="Add"&gt;&lt;/td&gt;
                &lt;/tr&gt;
                &lt;/form&gt;   

              &lt;/tbody&gt;
            &lt;/table&gt;
</code></pre>