title: Trying to seperate SQL results so I can change price by percentage
body: <p>I have a SQL search and results page that gives me 3 columns of data: category, number, and price. The results are returned in one big lump though. I want to be able to have a dropdown list with percents in it and clicking on one of the numbers changes the price by that percent. Trying to figure out how I can separate the results so I can have the dropdown list change the price. I assume I need to add an id to the price somehow, but I am not sure how I would do it. I would also like to do it all with PDO, but I'll try to figure that out next, right now I just want to be able to alter the price. This is the code I am working with now:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link   href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  .dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  
  .dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  .dropdown a:hover {background-color: #ddd;}
  
  .show {display: block;}
  &lt;/style&gt;
      &lt;title&gt;AJAX Search Example&lt;/title&gt;
      &lt;script&gt;
      function fetch() {
        // (A) GET SEARCH TERM
        var data = new FormData();
        data.append('search', document.getElementById("search").value);
        data.append('ajax', 1);
  
        // (B) AJAX SEARCH REQUEST
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "2-search.php");
        xhr.onload = function () {
          var results = JSON.parse(this.response),
              wrapper = document.getElementById("results");
          if (results.length &gt; 0) {
            wrapper.innerHTML = "";
            for (let res of results) {
              let line = document.createElement("div");
              line.innerHTML = `Category:${res['category']} - OEM #:${res['oemnumber']} - Price:$${res['price']}`;
              wrapper.appendChild(line);
            }
          } else { wrapper.innerHTML = "No results found"; }
        };
        xhr.send(data);
        return false;
      }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- (A) SEARCH FORM --&gt;
      &lt;form onsubmit="return fetch();"&gt;
        &lt;h1&gt;SEARCH FOR CATALYTIC CONVERTER&lt;/h1&gt;
        &lt;input type="text" id="search" required/&gt;
        &lt;input type="submit" value="Search"/&gt;
      &lt;/form&gt;
  
      &lt;!-- (B) SEARCH RESULTS --&gt;
      &lt;div id="results"&gt;&lt;/div&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;div class="dropdown"&gt;
    &lt;button onclick="myFunction()" class="dropbtn"&gt;Dropdown&lt;/button&gt;
    &lt;div id="myDropdown" class="dropdown-content"&gt;
      &lt;a href="#70"&gt;%70&lt;/a&gt;
      &lt;a href="#60"&gt;%60&lt;/a&gt;
      &lt;a href="#50"&gt;%50&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  /* When the user clicks on the button, 
  toggle between hiding and showing the dropdown content */
  function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
  }
  
  // Close the dropdown if the user clicks outside of it
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
  &lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So right now all of the data is just given as &quot;results&quot; and I added a little seperation in &quot;line.innerHTML = <code>Category:${res['category']} - OEM #:${res['oemnumber']} - Price:$${res['price']}</code>;&quot; to at least label the data, but I want to be able to point the javascript from the dropdown list directly at the &quot;price&quot; data. Any help with this would be greatly appreciated.
  This is the php script to get the data in case that is needed also:</p>
  <pre><code>&lt;?php
  // (A) DATABASE CONFIG - CHANGE TO YOUR OWN!
  define('DB_HOST', '');
  define('DB_NAME', '');
  define('DB_CHARSET', 'utf8');
  define('DB_USER', '');
  define('DB_PASSWORD', '');
  
  // (B) CONNECT TO DATABASE
  try {
    $pdo = new PDO(
      &quot;mysql:host=&quot;.DB_HOST.&quot;;charset=&quot;.DB_CHARSET.&quot;;dbname=&quot;.DB_NAME,
      DB_USER, DB_PASSWORD, [
        PDO::ATTR_ERRMODE =&gt; PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE =&gt; PDO::FETCH_ASSOC
      ]
    );
  } catch (Exception $ex) { exit($ex-&gt;getMessage()); }
  
  // (C) SEARCH
  $stmt = $pdo-&gt;prepare(&quot;SELECT * FROM `converter_prices` WHERE `category` LIKE ? OR `oemnumber` LIKE ? OR `price`  LIKE ?&quot;);
  $stmt-&gt;execute([&quot;%&quot;.$_POST['search'].&quot;%&quot;, &quot;%&quot;.$_POST['search'].&quot;%&quot;, &quot;%&quot;.$_POST['search'].&quot;%&quot;]);
  $results = $stmt-&gt;fetchAll();
  if (isset($_POST['ajax'])) { echo json_encode($results); }
  </code></pre>
  <p>Edit: Here are the results I am getting:
  <a href="https://i.stack.imgur.com/X5079.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X5079.png" alt="query reuslts" /></a></p>
  <p>I am trying to have it so if I click on 70% on the dropdown it will change the price column to 70% of the value.</p>
  <p>Like I said, all the results seem to just go into a &quot;results&quot; variable, I am trying to change it to something similar to this code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;?php
      $sql=$db-&gt;prepare('SELECT * FROM `converter_prices` WHERE `category` LIKE ? OR `oemnumber` LIKE ? OR `price`  LIKE ?);
      $sql-&gt;execute(array(':category'=&gt;$_REQUEST[searchcategory]));
  
      while ($row=$sql-&gt;fetch())
      {
         echo "&lt;tr&gt;&lt;td&gt;$row[category]&lt;/td&gt;&lt;td&gt;$row[oemnumber]&lt;/td&gt;&lt;td&gt;$row[price]&lt;/td&gt;&lt;/tr&gt;";
      }
  ?&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  
  but I have been googling for days and just cannot find the right info. I will google DOM Navigation and see if that helps, thank you.</p>