Auto reloding/refreshing div with jquery makes impact on page style - php

Question

I was set up my index page with pending order,sales and completed order. Each and every minutes that data are changed.so i decided to refresh particular div by jquery and got succeed by changing data dynamically.But issues start on my style.When the div was reloded style of card was distract.I dont know why this happened.
<div class="row" >
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12" id="here">
<div class="row">
<div class="col-xl-12">
<div class="card border-3 border-top border-top-primary">
<div class="card-body">
<h5 class="text-muted">Total Sales</h5>
<div class="metric-value d-inline-block">
<h1 class="mb-1 text-center"><? if($total != '') { echo "Rs: ".$total; } else { echo "Rs: 0";} ?></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="card border-3 border-top border-top-primary">
<div class="card-body">
<h5 class="text-muted">Complted Order</h5>
<div class="metric-value d-inline-block">
<h1 class="mb-1 text-center"><?= $complte." Nos"; ?></h1>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="card border-3 border-top border-top-primary">
<div class="card-body">
<h5 class="text-muted">Pending Order</h5>
<div class="metric-value d-inline-block">
<h1 class="mb-1 text-center"><?= $pending." Nos"; ?></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-12 col-md-6 col-sm-12 col-12">
<?
$orderquery = mysqli_query($conn,"SELECT * FROM ordermaster o LEFT JOIN customer c ON o.custid = c.custid WHERE o.status = 'p' AND orderdt = CURRENT_DATE() ");
?>
<div class="card">
<h5 class="card-header">Recent Orders</h5>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table">
<thead class="bg-light">
<tr class="border-0">
<th class="border-0">#</th>
<th class="border-0">Name</th>
<th class="border-0">Phone</th>
<th class="border-0">Address</th>
<th class="border-0">Pincode</th>
<th class="border-0">City</th>
<th class="border-0">Order Time</th>
<th class="border-0">Amount</th>
<th class="border-0">View</th>
</tr>
</thead>
<tbody>
<?
$count = 1;
while($res = mysqli_fetch_array($orderquery))
{
?>
<tr>
<td><?= $count; ?></td>
<td><?= $res['name']; ?> </td>
<td><?= $res['phone']; ?> </td>
<td><?= $res['addr1']."/".$res['addr2']; ?> </td>
<td><?= $res['pincode']; ?> </td>
<td><?= $res['city']; ?> </td>
<td><?= $res['orderdtm']; ?> </td>
<td><?= $res['net']; ?> </td>
<td><button class="btn btn-sm btn-outline-primary" title="View Product" onclick="del('<? echo $res['orderid'];?>')" value="id" data-toggle="modal" data-target="#delete" data-backdrop="static" data-keyboard="false"><i class="fas fa-eye"></i></button></td>
</tr>
<?
$count++;
}
?>
<tr>
<td colspan="9">View Details</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
and my jquery coding to reload div is
$(document).ready(function(){
setInterval(function(){
$("#here").load(window.location.href + " #here" );
}, 3000);
});
whats error going on i cann't understand.image before apply load
image after load

Answer 1

To stop the loop you can use clearInterval()
Jquery replace with this
$(document).ready(function(){
window.setInterval(function(){
$("#here").load(window.location.href + " #here");
}, 3000);
clearInterval()
});