title: How do I use Bootstrap modal in HTML table inside JavaScript?
body: <p>I have this JavaScript and JQuery code.</p>
  
  <pre><code>var a3host = new RegExp("^cn3g");
  var shorthost_reg = new RegExp("^cn.g..");
  $.getJSON("filename.json", function (data) {
          var a = 0;
          $.each(data, function (i, item) {
                  var c = item.hostname;
  
                  var cls;
                  // Assign class based on hostname regexp
                  if (a3host.test(item.hostname)) {
                      cls = "host3";
                      a = 3;
                  } else {
                      cls = "host8";
                          a = 8;
                      }
                      var shorthost = shorthost_reg.exec(item.hostname);
  if ( a == 3)
  {
  
      if (temp == 0)
      {
      document.write('&lt;table border = 10px class = "gpus_table" border="1" cellspacing="1" cellpadding="5" style = "display: inline-block;  margin : 10px " &gt;')
        document.write('&lt;tr&gt;');
    }
  temp++;
  document.write('&lt;td&gt;');
      document.write(item.hostname); //Output
  
  document.write('&lt;/td&gt;');
  if (temp%6 == 0)
  {
  document.write('&lt;/tr&gt;');
  document.write('&lt;tr&gt;');
  }
  if (temp == 60)
  {
      document.write('&lt;/table&gt;')
  }
  }
  }
  );    
  }
  );
  </code></pre>
  
  <p>This gives me this output.
  <img src="https://i.stack.imgur.com/HtsIz.jpg" alt="enter image description here"></p>
  
  <p>I want:
  When I click on hostname1, it gives me <a href="http://getbootstrap.com/javascript/#modals" rel="nofollow noreferrer">bootstrap modal</a> where I can print some values of JavaScript variables.</p>
  
  <p>Can anyone help?</p>
  
  <p>Please excuse for the bad coding practice.</p>