title: Inline Edit PHP MYSQL X-Editable
body: <p>Basically I was trying to play with edit functionality using ajax concept.</p>
  
  <p>As you all are aware, I'm in the beginning stage and now i downloaded some code stuffs from this url.
  <a href="http://vitalets.github.io/x-editable/docs.html" rel="nofollow">http://vitalets.github.io/x-editable/docs.html</a></p>
  
  <p>My code is here</p>
  
  <pre><code>    &lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Ajax Edit using PHP&lt;/title&gt;
      &lt;link href="bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="bootstrap-editable.css" rel="stylesheet"&gt;
      &lt;script src="jquery-2.0.3.min.js"&gt;&lt;/script&gt; 
      &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap-editable.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
      $('#username').editable({
          type: 'text',
          url: 'post.php',
          title: 'Enter username'
      });
  
      });
      &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;?php
      mysql_connect("localhost", "root", "password") or die(mysql_error());
      mysql_select_db("test") or die(mysql_error());
      $result = mysql_query("SELECT * FROM books") or die(mysql_error()); 
      ?&gt;
      &lt;div style="margin-top:100px;margin-left:40px;"&gt;
      &lt;?php while($row = mysql_fetch_array( $result )) { ?&gt;
      &lt;a href="#" data-pk="&lt;?php echo $row['book_id']; ?&gt;" id="username"&gt;&lt;?php echo $row['book_name']; ?&gt;&lt;/a&gt;
      &lt;br&gt;
      &lt;?php } ?&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>The above code display totally four book names(since the db has only four book names).
  I was able to edit the first book name alone and it gets edited in db too, and the remaining book names are not able to edit.</p>
  
  <p>When I inspected with firebug I get the below code</p>
  
  <pre><code>          &lt;a id="username" class="editable editable-click" data-pk="1" href="#"&gt;Book Name 1&lt;/a&gt;
            &lt;br&gt;
            &lt;a id="username" data-pk="2" href="#"&gt;Book Name 2&lt;/a&gt;
            &lt;br&gt;
            &lt;a id="username" data-pk="3" href="#"&gt;Book Name 3&lt;/a&gt;
            &lt;br&gt;
            &lt;a id="username" data-pk="4" href="#"&gt;Book Name 4&lt;/a&gt;
  </code></pre>
  
  <p>I know, i have missed something.</p>
  
  <p>Could someone help me out</p>
  
  <p>Thanks,
  Kimz      </p>