Auto creating div's with jQuery and inserting data from mysql - php

Question

I want to make auto creating div's with jQuery. I have to fill them with data from MySql database. The problem is that when I use foreach loop it doesn't want to echo data.
Here is my code for mysql:
$sql = "SELECT * FROM `post` ORDER BY `id` DESC";
$result = mysqli_query($con, $sql);
$row = mysqli_num_rows($result);
And here is my jQuery code:
$(document).ready(function(){
var count = 1;
for(i = <?php echo $row; ?>; i > 0; i--){
$("#main").prepend('<div id="first'+count+'"></div>');
count++;
}
count = 1;
for(i = <?php echo $row; ?>; i > 0; i--){
<?php
while($col = mysqli_fetch_assoc($result))
{
$cols[] = $col;
}
foreach($cols as $col){
?>
$("#first"+count+"").text("<?php echo $col['post']; ?>");
count++;
<?php } ?>
}
});
I've also checked in inspect element and everything seems ok, but it doesnt want to create div's.
And if I change this echo $col['post']; to some other text, it works.
Here is what I get in inspect element:
$(document).ready(function(){
var count = 1;
for(i = 3; i > 0; i--){
$("#main").prepend('<div id="first'+count+'"></div>');
count++;
}
count = 1;
for(i = 3; i > 0; i--){
$("#first"+count+"").text("text1");
count++;
$("#first"+count+"").text("text2");
count++;
$("#first"+count+"").text("text3");
count++;
}
});
Thank you for ideas!

Answer 1

I run your code in my workstation it works fine.
I can suggest you check for duplicate id of your new created div you can alter them in class may be its not conflict then.
Is #main div binded before the page load.
check for database is data insertion OK.
Its just some suggestion. If you can say some specific details about the scene, then i can provide you some specific suggestion.
Thanks