Jquery tab not working in php loop - php

Question

I am trying to loop in jquery tab code but not working i am using this plugin for that https://jqueryui.com/tabs/ its not working in loop what am i doing wrong?
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<?php
$camps=20;
for($i=1; $i<=$camps; $i++)
{
echo 'Campaign ' . $i . '';
}
?>
</ul>
<?php
$camps1=20;
for($i1=1; $i1<=$camps1; $i1++)
{
echo '<div id="tabs-'.$i1.'">';
echo $i1;
echo '</div>';
}
?>
</div>

Answer 1

In this case, IDs no need to be unique in order to make the tab working. The problem is you did't wrapped the a tag with li element. Try wrapping first loop tab with li element :
<div id="tabs">
<ul>
<?php
$camps=20;
for($i=1; $i<=$camps; $i++) {
echo '<li>Campaign ' . $i . '</li>';
}
?>
</ul>
<?php
$camps1=20;
for($i1=1; $i1<=$camps1; $i1++) {
echo '<div id="tabs-'.$i1.'">';
echo $i1;
echo '</div>';
}
?>
</div>
DEMO(with same id)
But hey, of course you need to make the IDs unique. :)