fill jquery tabs header with information from database - php

Question

I have the structure of a Tab component, but I will like that the head of each tab is the name of a person that is in the database stored.
For example, normally this is a tabs structure
<div id="tabs">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="panels">
<div id="tab-1">
</div>
<div id="tab-2">
</div>
<div id="tab-3">
</div>
</div>
</div>
But instead of Tab 1,2 and 3 as head text for each tab, I will like to have Marc, Josef, Luis and these are name from the DB. This also includes that everytime that a person is added I will have a new tab. Has anybody a idea how I can do this?
I tryed to call the result of the PHP query in the text of the head, but was not working
**********EDITED WITH CODE******************
<?php
$connection = mysql_connect(/*DAta connectionns*/);
if (!$connection)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("", $connection);
$result = mysql_query("SELECT * FROM People");
while($row = mysql_fetch_array($result))
{
$r = $row["name"];
<div id="tabs">
<ul>
<li><?php $r ?></li>
</ul>
<div class="panels">
</div>
</div>
}
?>
I know that there is something wrong, but I can not see

Answer 1

Assume you have a JavaScript Object (from your ajax?) you can do:
var mytabs = [{
name: "Marc"
}, {
name: "Josef"
}, {
name: "Luis"
}];
$('#tabs').tabs();
$.each(mytabs, function(indexInArray, myobj) {
$('#tabs').find('li> a').eq(indexInArray).text(myobj.name);
});
Here is a fiddle you can play with: http://jsfiddle.net/MarkSchultheiss/p4mzy3hb/