Adding new elements inside a div with auto increment Id

Question

I have been trying to figure a way to add a div inside another div using a button, but I think the logic for it may be a bit beyond my reach at the moment. Basically I have this labs facilities, and when I create one in a page it should add them to the database, that is done and working.

Then I needed a div acting as popUp to retrive the information of each lab, that also works but if I have more than one lab is displays all the information of those labs in that one popUp meant for one. Which brings me to my next point.

I needed and decided that when I click the Aceptar button the new div created should have a id=n, where for each new div added it goes n+1, so div1 has a id of 1, div 2 of 2 and so on. I think this made using arrays... in that way I can update my php code to say:

 function getLabs(){
$query = "SELECT bk.idlab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE idDiv=bk.idlab"; (or something like that I think I have to declare idDiv first)

$result = do_query($query);

   return $result;
 }

Right now this is the code I have...because I am stumped:

Html code in the php. page for the list of labs:

      <div class="scroll-area" id="lista"> //THIS IS THE BIG DIV CONTAINING THE LIST

      <div>  //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
          <p>Lab #1</p>
          <p class="info"><a href="#" id="lnkInfo">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>

      <div class="box">
          <p>Lab #2</p>
          <p class="info"><a href="#">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>

      <div class="box"> //So if I add another it would be Lab#4 with id=4
          <p>Lab #3</p>
          <p class="info"><a href="#">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div        

  </div>

Here is the button used in ANOTHER page that I am using for adding the labs to the database which is working 100%:

  <input class="formatButton verInfo2"  type="button" value="Aceptar" id="btnAceptar"   onclick="agregar()"/>

In both pages (list and add) the scripts as well as the includes are present.

And the code I was thinking for adding new divs (as well as removing one) goes along these lines:

function agregar() {
var div = document.createElement('div');

div.className = 'box';

     '<div class="box">
          <p>Lab HERE GOES NUMBER</p>
          <p class="info"><a href="#" id="lnkInfo">Info</p></a>
          <p class="info"><a href="reservarLab.html">Reservar</p></a>
      </div>';

    document.getElementById('content').appendChild(div);
}

  function eliminar(input) {
 document.getElementById('content').removeChild( input.parentNode );
}

But I hitted a mental block about how to proceed now >.< any help would be a godsend, I tried to keep it brief and only put the relevant code but if there is anything else I could provide in order to get some help I will do it.

Thanks a lot in advance and best wishes!

Answer 1

I think you can do this:

div.id = querySelectorAll('lista > div').length +1;

The length varies each time you add the div. So this should work for you.

Answer 2

If I understand the code correctly, you want to click a button and be able to add a div inside another div with the id = to the previous id+1?

JQUERY

$(document).ready(function(){
    var counter = 1;
$('#addDiv').click(function(){
    $('#'+counter).html('<div id="' + (++counter) + '"></div>');    
 });
});

HTML

<div id="1">

</div>
<button id="addDiv">Add Div Inside</button>