Trying to display php generated table in a DIV and have it refresh on an interval as well as having a refresh button/href

Trying to display php generated table in a DIV and have it refresh on an interval as well as having a refresh button/href

Ok I would like the 6 div tags to display data (all formatted as tables via a php page)
1-So when you get to the page the 6 div tags have data 
2-Have the Div tags refresh every 30 seconds
3-Have a refresh button/link so that the DIV can be refreshed any time

here is what I have so far any how I can get those 2 things above accomplished?



<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false }); 
setInterval(function() {
$('#d1').load('./scores.php?tblNumber=2');
$('#d2').load('./scores.php?tblNumber=3');
$('#d3').load('./scores.php?tblNumber=4');
$('#d4').load('./scores.php?tblNumber=5');
$('#d5').load('./scores.php?tblNumber=6');
$('#d6').load('./scores.php?tblNumber=7');
}, 30000);  
});

</script> 

.
.
.

<div id="d1">Loading scores...</div>
<a id="refresh1" href="#"><img src="../images/refresh.png" border="0"></a>
<div id="d2">Loading scores...</div>
<a id="refresh2" href="#"><img src="../images/refresh.png" border="0"></a>
<div id="d3">Loading scores...</div>
<a id="refresh3" href="#"><img src="../images/refresh.png" border="0"></a>
<div id="d4">Loading scores...</div>
<a id="refresh4" href="#"><img src="../images/refresh.png" border="0"></a>
<div id="d5">Loading scores...</div>
<a id="refresh5" href="#"><img src="../images/refresh.png" border="0"></a>
<div id="d6">Loading scores...</div>
<a id="refresh6" href="#"><img src="../images/refresh.png" border="0"></a>