title: How to add and delete accordion rows (product registration) Version 2
body: <p>Please read the new question regarding this matter below the page, title Verison 2:</p>
  
  <p>I would like to add product registration within accordion. When entering the product registration website one accordion should be visible - product details needs to be entered and then it the user would have to press ADD-button to add the product. </p>
  
  <p>When pressing add button a new accordion with product registration should appear and the above accordion should collapse. So I have managed to do so, but when pressing ADD-button on the second accordion-product-registration it won't add a new accordion nor collapse the active accordion. </p>
  
  <p>Furthermore, the accordions should have a delete button to delete the intire accordion if needed and a edit button as well. </p>
  
  <p>My code looks like this bellow (I had help from the "How to add and delete “rows” in an accordion in jQuery 1" stackoverflow question):</p>
  
  <p>HTML (Bootstrap)</p>
  
  <pre><code>&lt;div class="panel-group" id="demo"&gt;
          &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-8"&gt;&lt;input class="form-test" data-parent="#demo" data-toggle="collapse" href="#luk" placeholder="Produktnavn"&gt;&lt;/div&gt;
                          &lt;div class="col-md-2"&gt;&lt;button type="button" data-parent="#demo" data-toggle="collapse" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;
                          &lt;div class="col-md-2"&gt;&lt;button type="button" class="removeBtn" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="luk" class="panel-collapse collapse in"&gt;
                      &lt;div class="panel-body rowbg"&gt;
                          &lt;div class="row rowbg"&gt;
                              &lt;input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"&gt;
                              &lt;input type="text" class="form-control test-product col-md-3" placeholder="Mærke"&gt;
                              &lt;input type="text" class="form-control test-product col-md-3" placeholder="Model"&gt;
                              &lt;input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;  
  
                      &lt;div align="right"&gt;
                          &lt;button id="add_item" type="button" data-parent="#demo" href="#luk" class="btn-product btn-success"&gt;
                          TILF&amp;Oslash;J
                          &lt;/button&gt;
                      &lt;/div&gt;  
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>SCRIPT: </p>
  
  <pre><code>    $('.removeBtn').click(function(){
  $(this).parent('div').next('div').andSelf().remove();
      });
  
      $('#add_item').click(function(){
      $('#demo').append('&lt;div class="panel panel-default"&gt;&lt;div class="panel-heading"&gt;&lt;div class="row"&gt;&lt;div class="col-md-8"&gt;&lt;input class="form-test" placeholder="Produktnavn"&gt;&lt;/div&gt;&lt;div class="col-md-2"&gt;&lt;button type="button" class="removeBtn" class="btn btn-default"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id="luk" class="panel-collapse collapse in"&gt;&lt;div class="panel-body rowbg"&gt;&lt;div class="row rowbg"&gt;&lt;input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"&gt;&lt;input type="text" class="form-control test-product col-md-3" placeholder="Mærke"&gt;&lt;input type="text" class="form-control test-product col-md-3" placeholder="Model"&gt;&lt;input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div align="right"&gt;&lt;button id="add_item" data-parent="#demo" href="#luk" type="button" class="btn-product btn-success"&gt;TILF&amp;Oslash;J&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;').demo('destroy').demo(); });
  
      $(document).on('click', '.removeBtn', function(){
      $(this).parent('div').next('div').andSelf().remove();
      return false; });
  </code></pre>
  
  <p>Btw the attribute = TILF&Oslash;J = ADD on English. Translated to Danish</p>
  
  <p>VERSION 2: </p>
  
  <p>How can i automatically add a new ID/CLASS to each new product the user adds?? I have problem getting the the information from the other added products in my DATABASE, due to that the accordion only has one ID and when adding a product the same ID appears on all other accordions, which the database cannot seperate. </p>
  
  <p>Is there any solution to this problem? </p>
  
  <p>Thank you in advance</p>