title: Adding new elements inside a div with auto increment Id
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code> 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;
   }
  </code></pre>
  
  <p>Right now this is the code I have...because I am stumped:</p>
  
  <p>Html code in the php. page for the list of labs:</p>
  
  <pre><code>      &lt;div class="scroll-area" id="lista"&gt; //THIS IS THE BIG DIV CONTAINING THE LIST
  
        &lt;div&gt;  //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
            &lt;p&gt;Lab #1&lt;/p&gt;
            &lt;p class="info"&gt;&lt;a href="#" id="lnkInfo"&gt;Info&lt;/p&gt;&lt;/a&gt;
            &lt;p class="info"&gt;&lt;a href="reservarLab.html"&gt;Reservar&lt;/p&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="box"&gt;
            &lt;p&gt;Lab #2&lt;/p&gt;
            &lt;p class="info"&gt;&lt;a href="#"&gt;Info&lt;/p&gt;&lt;/a&gt;
            &lt;p class="info"&gt;&lt;a href="reservarLab.html"&gt;Reservar&lt;/p&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="box"&gt; //So if I add another it would be Lab#4 with id=4
            &lt;p&gt;Lab #3&lt;/p&gt;
            &lt;p class="info"&gt;&lt;a href="#"&gt;Info&lt;/p&gt;&lt;/a&gt;
            &lt;p class="info"&gt;&lt;a href="reservarLab.html"&gt;Reservar&lt;/p&gt;&lt;/a&gt;
        &lt;/div        
  
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is the button used in ANOTHER page that I am using for adding the labs to the database which is working 100%:</p>
  
  <pre><code>  &lt;input class="formatButton verInfo2"  type="button" value="Aceptar" id="btnAceptar"   onclick="agregar()"/&gt;
  </code></pre>
  
  <p>In both pages (list and add) the scripts as well as the includes are present.</p>
  
  <p>And the code I was thinking for adding new divs (as well as removing one) goes along these lines:</p>
  
  <pre><code>function agregar() {
  var div = document.createElement('div');
  
  div.className = 'box';
  
       '&lt;div class="box"&gt;
            &lt;p&gt;Lab HERE GOES NUMBER&lt;/p&gt;
            &lt;p class="info"&gt;&lt;a href="#" id="lnkInfo"&gt;Info&lt;/p&gt;&lt;/a&gt;
            &lt;p class="info"&gt;&lt;a href="reservarLab.html"&gt;Reservar&lt;/p&gt;&lt;/a&gt;
        &lt;/div&gt;';
  
      document.getElementById('content').appendChild(div);
  }
  
    function eliminar(input) {
   document.getElementById('content').removeChild( input.parentNode );
  }
  </code></pre>
  
  <p>But I hitted a mental block about how to proceed now >.&lt; 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.</p>
  
  <p>Thanks a lot in advance and best wishes!</p>