title: Populating divs with MySQL data, matching row to a numbered ID
body: <p>I am trying to use a database of books to display relevant data on a page by matching an id of a clickable div with a sort of serial number for each book in the database. my table is thus:</p>
  <pre><code>+-------------------+----------------+------------------+------------------+
  | booknumber (INT)  | title (VCHAR)  | author (VCHAR)   | publisher (VCHAR)|
  +-------------------+----------------+------------------+------------------+
  | 123               | title of book  | name             | publisher name   |
  | 124               | title of book  | name             | publisher name   |
  | 125               | title of book  | name             | publisher name   |
  | 127               | title of book  | name             | publisher name   |
  | 128               | title of book  | name             | publisher name   |
  | 130               | title of book  | name             | publisher name   |
   --------------------------------------------------------------------------
  </code></pre>
  <p>I was able to get data to display thanks to the answer in <a href="https://stackoverflow.com/questions/53840554/populate-html-div-with-data-from-mysql">this thread</a>.</p>
  <p>HTML</p>
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;book_db.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;  
        
        &lt;div class=&quot;index-wrapper&quot;&gt;
          &lt;div class=&quot;book&quot; id=&quot;123&quot;&gt;Book title&lt;/div&gt;
          &lt;div class=&quot;book&quot; id=&quot;124&quot;&gt;Book title&lt;/div&gt;
          &lt;div class=&quot;book&quot; id=&quot;125&quot;&gt;Book title&lt;/div&gt;
          &lt;div class=&quot;book&quot; id=&quot;127&quot;&gt;Book title&lt;/div&gt;
          &lt;div class=&quot;book&quot; id=&quot;128&quot;&gt;Book title&lt;/div&gt;
          &lt;div class=&quot;book&quot; id=&quot;130&quot;&gt;Book title&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;div class=&quot;book-info&quot;&gt;
            &lt;h2 id='title'&gt;&lt;/h2&gt;
            &lt;span id='booknumber'&gt;&lt;/span&gt;
            &lt;span id='author'&gt;&lt;/span&gt;
            &lt;span id='pubhisher'&gt;&lt;/span&gt;
        &lt;/div&gt;
      
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>php</p>
  <pre><code>&lt;?php
  $hostname = &quot;localhost&quot;;
  $username = &quot;***&quot;;
  $password = &quot;***&quot;;
  $databaseName = &quot;book_db&quot;;
  
  
  $connect = mysqli_connect($hostname, $username, $password, $databaseName);
  
  $query = &quot;SELECT booknumber, title, author, publisher FROM booknumber&quot;;
  
  $result = mysqli_query($connect, $query);
  
  while($row = mysqli_fetch_array($result))
  {
    $dataRow[] = $row;
  }
  
  echo json_encode($dataRow);
  ?&gt;
  </code></pre>
  <p>and jquery</p>
  <pre><code>$(document).ready(function() {
      $.post(&quot;book_db.php&quot;, {
         
      }, function(server_data) {
         data = JSON.parse(server_data);
         $(document).on('click', '.book', function(){
         var number = $(this).attr('id');
     
          $(&quot;#title&quot;).html(data[number]['title']);
          $(&quot;#booknumber&quot;).html(data[number]['booknumber']);
          $(&quot;#author&quot;).html(data[number]['author']);
          $(&quot;#publisher&quot;).html(data[number]['publisher']);
     
          });    
      });
  });  
  </code></pre>
  <p>This works great for the first 125 or so books, but then there's a section where the numbers on the actual books skip a number as those books aren't used. That's when I realized that this code is pulling from the row number and not my INT data (the actual number of the book).</p>
  <p>So what I want to accomplish is filling in the text inside the info div with the data of the row corresponding to the book number (INT) in the database (not the row number). I have the booknumber column set as my primary key, if that has any bearing on the solution.</p>