ajax load mysql data into multiple divs - php

Question

at first I apologise for creating this topic. I did try to search the answer but I couldnt find the right solution.
I am reading data from mysql with ajax and everything is working with one div. The thing I can't get working is to load each variable into separate div.
I use this api.php for fetching the data from mysql.
<?php
$host = "localhost";
$user = "root";
$pass = "";
$databaseName = "skuska";
$tableName = "hodnoty";
//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$result = mysql_query('SELECT t.hodnota FROM hodnoty t ORDER BY t.id DESC LIMIT 1') or die('Invalid query: ' . mysql_error()); //query
while ($row = mysql_fetch_assoc($result)) {
echo $row['hodnota'];
}
?>
This is the ajax script for updating the data.
$(document).ready(function() {
$("#gettable").load("api.php");
var refreshId = setInterval(function() {
$("#gettable").load('api.php?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
Then in html I am using div for showing the data
<div id="gettable"></div>
I would like to use this but with more variables like data1, data2, data3
and then used div for each data so I could use more divs.
For example:
<div id="data1"></div>
<div id="data2"></div>
I understand html, a little bit of php but I am totally new in java.
Thank you for your help.

Answer 1

do this
take as many variables as you have div and store content in variables inside loops
/******* a short example **************/
$div1cnt="";
$div2cnt="";
while($SRC=mysqlii_fetch_object($link)){
$divid=$SRC->id;
if($divid==1){
$div1cnt.="add more stuff that you want here";
}
else if($divid==2){
$div2cnt.="add stuff to second div";
}
echo "<div id=\"div1\">{$div1cnt}</div>";
/************and so on ******************/
There is no JS requirement means it is mobile friendly and no double connection required to load second page.

Answer 2

Here is how you can solve the problem in Javascript ( watch out, not JAVA :) )
$(document).ready(function() {
var i = 1;
$.get("api.php", function(result) {
$("#gettable").append("<div id='data"+i+"'>"+result+"</div>");
i++;
});
var refreshId = setInterval(function() {
$.get("api.php?randval="+ Math.random(), function(result) {
$("#gettable").append("<div id='data"+i+"'>"+result+"</div>");
i++;
});
}, 9000);
$.ajaxSetup({ cache: false });
});