Dynamically create Divs

Question

Sirs,

I am working with tabs in Jquery. I have a page called inclu_server.php where I do the Insert in the database of as many servers as I want. I need that after clicking the button next the amount of tabs on the page be the same as the amount of records that were entered on the previous page. That I even managed to do with the code below:

<div id="tabs">
    <ul>
        <?php
            do {  
        ?>
            <li><a href="#tabs-<?php echo $row_menu_servidor['host_servidor']?>"><?php echo $row_menu_servidor['host_servidor']?></a></li>
        <?php
            } while ($row_menu_servidor = mysql_fetch_assoc($menu_servidor));
            $rows = mysql_num_rows($menu_servidor);
                if($rows > 0) {
                    mysql_data_seek($menu_servidor, 0);
                    $row_menu_servidor = mysql_fetch_assoc($menu_servidor);
                            }               
        ?>          
    </ul>

My problem now is that I need the content of this DIV or TAB/ABA to be dynamic as well. From what I’m imagining, I need to declare that for each

<li><a href="#tabs-<?php echo $row_menu_servidor['host_servidor']?>"><?php echo $row_menu_servidor['host_servidor']?></a></li>` a página inclua uma DIV com o conteúdo `<div id="tabs-ndcingmgm001">
            <div id="id_solic"><div style="position: absolute; margin-left:10px; margin-top:-10px; width:100px; height: 10;"><br/>
                <h4>ID Solicitação<br>
                <form name="form1" method="post" action="">
                    <input name="id_solic" id="id_solic" type="text" value="<?php echo $_POST['id_solic'];?>" size="5" readonly="readonly">
                    <br><br>
                </form>
            </div>
            </div>
        </div>

I believe I have to make the ID of this DIV content dynamic, according to the amount of query records passed above.

I hope I was able to explain it clearly.

Answer 1

The answer to your question (if I understand) is YES, id needs to be dynamic.

For every tab you want to have you should, create a div with a id and point out that same id in the href of the link within the li as an example below:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Primeira Aba</a></li>
    <li><a href="#tabs-2">Segunda Aba</a></li>
    <li><a href="#tabs-3">Terceira Aba</a></li>
  </ul>
  <div id="tabs-1">
    bla bla bla 1
  </div>
  <div id="tabs-2">
    bla bla bla 2
  </div>
  <div id="tabs-3">
    bla bla bla 3
  </div>
</div>

more examples in jquery ui website