Modal body content not hiding

Created by: TimNguyenBSM

This Modal works perfectly:

<!-- Modal -->
<div class="modal fade" id="company-about" tabindex="-1" role="dialog" aria-labelledby="company-about-label" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="company-about-label">Company Name</h4>
         </div>
         <div class="modal-body">
            <p>Company bio here...</p>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This Modal below follows the above Modal immediately, but the Table is showing, rather than being hidden. On click, the Table content is blank. If I delete the Table data and replace with a text, it works as expected:

<!-- Modal -->
<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="fee-details-label">Fees - What this loan will cost you to close</h4>
         </div>
         <div class="modal-body">
            <table class="table table-condensed">
               <tr>
                  <thead>
                     <th>Header1</th>
                     <th>Header2</th>
                     <th>Header3</th>
                  </thead>
               </tr>
               <tr>
                  <td>data1</td>
                  <td>data2</td>
                  <td>data3</td>
               </tr>
            </table>
          </div>
       </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->