title: find records in sql with same id as html button's id and generate a modal
body: <p>The problem is that I have an html table with short info about employees that is taken from MySQL database. I'm trying to make a button with some ID that will open a modal window with full info about employee with the same value in it's field called 'ButtonID'. I tried to make desired query and set it to some variable in php and then access it in javascript but it didn't end well.</p>
  
  <pre><code> &lt;!--
   in &lt;input id = "1" type="button" value="Full Info" input id equals to sql 
  'ButtonID' fields value
   --&gt;
   Edit:
  &lt;form action=""&gt;
  &lt;input id = "1" type="button" value="Full Info" 
   onclick="fullInfo()"&gt;
   &lt;/form&gt;
  
  &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Список сотрудников&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;/head&gt;
        &lt;body&gt;
  
      &lt;div class = "header"&gt;
          &lt;img src = "img/header.png"&gt;&lt;/img&gt;
      &lt;/div&gt;
  
      &lt;div class = "container"&gt;
      &lt;?php
  
      echo "&lt;table id='table_id' class = 'table table-striped'&gt;";
      echo "&lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;№&lt;/th&gt;
                  &lt;th&gt;ФИО&lt;/th&gt;
                  &lt;th&gt;Имя транслитом&lt;/th&gt;
                  &lt;th&gt;Дата рождения&lt;/th&gt;
                  &lt;th&gt;Должность&lt;/th&gt;
                  &lt;th&gt;Дата приёма&lt;/th&gt;
                  &lt;th&gt;№ удостоверения&lt;/th&gt;
                  &lt;th&gt;Полная информация&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          ";
  
      class TableRows extends RecursiveIteratorIterator { 
          function __construct($it) { 
              parent::__construct($it, self::LEAVES_ONLY); 
          }
  
          function current() {
              return "&lt;td&gt;" . parent::current(). "&lt;/td&gt;";
          }
  
          function beginChildren() { 
              echo "&lt;tr&gt;"; 
          } 
  
          function endChildren() { 
              echo "&lt;/tr&gt;" . "\n";
          } 
      } 
  
      $servername = "localhost";
      $username = "user";
      $password = "password";
      $dbname = "test";
  
      try {
          $conn = new PDO("mysql:host=$servername;dbname=$dbname;charset=utf8", $username, $password);
          $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $stmt = $conn-&gt;prepare("SELECT number, fullname, engname,birthdaydate, position, recruitmentDate,id,buttonid FROM employees"); 
          $ids = $conn-&gt;prepare("SELECT * FROM employees"); 
          $stmt-&gt;execute();
  
          // set the resulting array to associative
          $result = $stmt-&gt;setFetchMode(PDO::FETCH_ASSOC); 
          foreach(new TableRows(new RecursiveArrayIterator($stmt-&gt;fetchAll())) as $k=&gt;$v) { 
              echo $v;
          }
      }
      catch(PDOException $e) {
          echo "Error: " . $e-&gt;getMessage();
      }
  
      $conn = null;
      echo "&lt;/table&gt;";
      ?&gt;
      &lt;/div&gt;
      &lt;div class = "footer"&gt;
          &lt;img src = "img/footer.jpg"&gt;&lt;/img&gt;
      &lt;/div&gt;
  
          &lt;!--&lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;--&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/normalize.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css"&gt;
          &lt;script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  
      $(document).ready(function() {
          $('#table_id').DataTable( {
              "language": {
                  "url": "//cdn.datatables.net/plug-ins/1.10.13/i18n/Russian.json"
              }
          } );
  
  
  
      } );
          &lt;/script&gt;
          &lt;!--
          &lt;script&gt;
          function fullInfo(){
              var ids = &lt;?php echo json_encode($ids); ?&gt;;
              for (int i = 0;i&lt;ids.length;i++){
                  if (ids['buttonID'] == this.id){
                      alert ("good");
                  }
              }
          };
          &lt;/script&gt;
          --&gt;
  
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>