Load Foreach Table In A Modal Which Is Called From Another Foreach Table

i have a modal with a table in in. i load the modal from a foreach table. i believe my code is right but i dont know why it displays in a funny way. this is my code and when i run

Solution 1:

Use like this.

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Track Number</th>
            <th>Price</th>
            <th>Address</th>
            <th>Order Date</th>
            <th>Status</th>
            <th>Auction</th>
        </tr>
    </thead>


    <tbody>
    <?php
        $count = 1; 
        $notarray = DataDB::getInstance()->select_from_where('order_collective','user_id',$userid);
        foreach($notarray as $row):
        $address = $row['appartment'].",".$row['address'].",".$row['city'].",".$row['state'].".".$row['landmark'];
        ?>
    <tr>
        <td><?php echo $count++;?></td>
        <td><?php echo $row['trackingnumber'];?></td>
        <td><?php echo "NGN ".number_format($row['price'], 2);?></td>
        <td><?php echo $address;?></td>
        <td><?php echo $row['order_date'];?></td>
        <td><?php echo DataDB::getInstance()->get_name_from_id('name','delivery_status','delivery_status_id',$row['delivery_status']);?></td>
        <td>
        <div class="btn-group">
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myVie<?php echo $row['trackingnumber'] ?>">View</button>
        </div>
        <?php include ('order_history_modal.php'); ?>
        </td>
    </tr>  
    <?php endforeach;?>
</tbody>
</table>

order_history_modal.php

<div id="myVie<?php echo $row['trackingnumber'] ?>" class="modal fade" role="dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
          </div>
          <div class="modal-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                      <tr>
                        <th>Item</th>
                        <th>Quantity</th>
                        <th>Price</th>
                      </tr>
                    </thead>
                    <tbody>
                <?php 
                $notal = DataDB::getInstance()->select_from_where('order_details','trackingnumber',$row['trackingnumber']);             
                foreach($notal as $rol):
                    $prrname = DataDB::getInstance()->get_name_from_id('product_name','product','product_id',$rol['product_id']);?>
                    <tr>
                    <td><?php echo $prrname ?></td>
                    <td><?php echo $rol['quantity'] ?></td>
                    <td><?php echo "NGN ".number_format($rol['price'], 2);?></td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
                </table>
             </div> 
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table">
	<thead>
    	<tr>
        	<th>#</th>
            <th>Track Number</th>
            <th>Price</th>
            <th>Address</th>
            <th>Order Date</th>
            <th>Status</th>
            <th>Auction</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td>1</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>
            <div class="btn-group">
                 <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myVie1">View</button>
            </div>
	        <div id="myVie1" class="modal fade" role="dialog">
             	<!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                  </div>
                  <div class="modal-body">
					<div class="table-responsive">
                        <table class="table">
                            <thead>
                              <tr>
                                <th>Item</th>
                                <th>Quantity</th>
                                <th>Price</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>test</td>
                                <td>test</td>
                                <td>test</td>
                              </tr>
                            </tbody>
                        </table>
                     </div> 
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>
			</div>
            </td>
        </tr>
    </tbody>
</table>