Untitled

<html>
    <head>
        <title>Hello Student</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />

    </head>
    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="parentTable">
      <thead>
        <tr class="category">
        <th></th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
        </tr>
      </thead>

      <tbody id="parentTableBody">
      </tbody>
    </table>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <h3>Info</h3>
                            <div class="well well-sm overflow-auto">
                                <table class="table table-striped table-hover table-condensed" id="schoolTable">
                                    <thead>
                                    <tr>
                                        <th/>
                                        <th>School</th>
                                        <th>Grade</th>
                                        <th>Job</th>
                                        <th>Martial</th>
                                        <th>Etc</th>
                                    </tr>
                                    </thead>
                                    <tbody id="schoolModalBody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

        </body>
    </html>

$(document).ready(function() {
      var arr1 = generateItem();
      if (arr1) {
        var arr2 = [].concat(arr1);
        var tr;
        $.each(arr2, function(i, e) {
          tr = $('<tr>');
          tr.append("<td>" + "<button id='modalBtn' type='button' class='btn btn-info' data-toggle='modal' data-target='#myModal'>Info</button>" + "</td>");
          tr.append("<td>" + (e.Name || "") + "</td>");
          tr.append("<td>" + (e.Email || "") + "</td>");
          tr.append("<td>" + (e.Phone || "") + "</td>");
          $('#parentTableBody').append(tr);

         populateSchoolInfo(e);
        });

      }
    });
        function populateSchoolInfo(kid) {
        var tr;
                    $.each(kid.Edu, function(j, v){
                        tr = $('<tr>');
                        tr.append("<td>" + (v.School || "") + "</td>");
                        tr.append("<td>" + (v.Grade || "") + "</td>");
                        tr.append("<td>" + (v.Job || "") + "</td>");
                        tr.append("<td>" + (v.Martial || "") + "</td>");
                        tr.append("<td>" + (v.ETC || "") + "</td>");
                        $('#schoolModalBody').append(tr);
                        });
    }

    function generateItem() {
      var kids = [{
          Name: "Gina",
          Email: "gina@email.com",
          Phone: "211-456-1234",
          Edu:[{School: "college", Grade: "Freshmen", Job: "Student", Martial: "S", ETC: " "}]
        },
        {
          Name: "Mark",
          Email: "mark@email.com",
          Phone: "144-411-2312",
          Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
        },
        {
          Name: "Jake",
          Email: "jake@email.com",
          Phone: "333-211-1111",
          Edu:[{School: "highschool", Grade: "senior", Job: "cashier", Martial: "S", ETC: "honors"}]
        }
      ];
      return kids;
    }