Bootstrap class is not applied for dynamically added content

.panel-default.panel-custom {
    background: #05B9F0;
    color: white;
}
.headertext {
    text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <script>
        $(document).ready(function(){
          $("#getdata").click(function(){
            var foobar  = $("#partnumbers").val();
            var urlToCall = "http://127.0.0.1:3000/foo?bar="+foobar
              $.getJSON(urlToCall, function(data, status){
                var markup = '';
                $.each(data, function(index) {
                  var key = index;
                  var value = data[index];
                  markup = markup + '<tr><td class="col-md-3">"'+key+'</td><td class="col-md-9">'+value+'</td></tr>'
                })
                markup = markup + "</table>";
                $("#data").append(markup);
                $("#data").addClass("table table-striped table-hover")
                $("#data").show()
              });
          });
      });
      </script> 
      <div class="panel panel-default panel-custom">
              <h2 class="headertext">
                  Foo Bar Status
              </h3> 
      </div>
        <div id=input-group class="input-group">
          <input type="text" id=partnumbers class="form-control" placeholder="Part Numbers">
            <span class="input-group-btn">
              <button class="btn btn-default" id="getdata" type="button" >View Data</button>
            </span>
        </div>
        <br>
        <br>
          <table id="data" style="display:none" >
            <thead>
              <tr>
                <th>Description</th>
                <th>Status</th>
              </tr>
            </thead>
          </table>
    </body>