title: Open Modalbox with generated Buttons
body: <p>I created a Table with data out of a JSON and add to this table with a Javascript-function buttons.</p>
  
  <p>Now i want to open with this button <code>generated Modalboxes</code> with diffrent Outputs ( e.g <code>Hello world1</code> by button 1, <code>hello world2</code> by button 2).</p>
  
  <p>Is there a way to solve this ? </p>
  
  <p><strong>My Code:</strong></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-js lang-js prettyprint-override"><code>$( document ).ready(function() {
  
      //JSON for table    
      var hotspots = "[{\"path\": \"src/main/java/tools/generator/data/RecordPart.java\",\"revisions\": 25,\"codeLines\": 18,\"authors\": [{\"name\": \"User1\",\"commits\": 7}]},{\"path\": \"src/main/java/tools/generator/data/RecordTotal.java\", \"revisions\": 55,\"codeLines\": 23,\"authors\": [{\"name\": \"User1\",\"commits\": 5}]},{\"path\": \"src/main/resources/test.xml\",\"revisions\": 102,\"codeLines\": 44,\"authors\": [{\"name\": \"User1\",\"commits\": 7}]},{\"path\": \"src/main/java/tools/generator/helper/MenuHelper.java\",\"revisions\": 4,\"codeLines\": 115,\"authors\": [{\"name\": \"User1\",\"commits\": 2}]}]";  
            
          var jsonHotspots = JSON.parse(hotspots);
          constructTable(jsonHotspots);
      });
  
  
      // Table out of json
      function constructTable(json) {
          var tbl=$("&lt;table/&gt;").attr("id","mytable");
          $("#div1").append(tbl);
          var tr="&lt;tr&gt;";
          var td1='&lt;td onclick="sortTable(0)" &gt;Path&lt;/td&gt;';
          var td2='&lt;td onclick="sortTable(1)" &gt;Rev&lt;/td&gt;';
          var td3='&lt;td onclick="sortTable(2)" &gt;Lines&lt;/td&gt;';
          var td4='&lt;td &gt;&lt;/td&gt;&lt;/tr&gt;';
          $("#mytable").append(tr+td1+td2+td3+td4);
          for(var i=0;i &lt; json.length ; i++)
          {
              var tr="&lt;tr&gt;";
              var td1="&lt;td&gt;"+json[i]["path"]+"&lt;/td&gt;";
              var td2="&lt;td&gt;"+json[i]["revisions"]+"&lt;/td&gt;";
              var td3="&lt;td&gt;"+json[i]["codeLines"]+"&lt;/td&gt;";
              var td4='&lt;td&gt;&lt;button class="button" id="myBtn'+ i +'"&gt;Show&lt;td&gt;&lt;/tr&gt;';
             $("#mytable").append(tr+td1+td2+td3+td4);
          }
      }
      
      
     </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;table id="mytable"&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>