How to add and delete accordion rows (product registration) Version 2

Question

Please read the new question regarding this matter below the page, title Verison 2:

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.

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.

Furthermore, the accordions should have a delete button to delete the intire accordion if needed and a edit button as well.

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):

HTML (Bootstrap)

<div class="panel-group" id="demo">
        <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-8"><input class="form-test" data-parent="#demo" data-toggle="collapse" href="#luk" placeholder="Produktnavn"></div>
                        <div class="col-md-2"><button type="button" data-parent="#demo" data-toggle="collapse" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button></div>
                        <div class="col-md-2"><button type="button" class="removeBtn" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button></div>
                    </div>
                </div>
                <div id="luk" class="panel-collapse collapse in">
                    <div class="panel-body rowbg">
                        <div class="row rowbg">
                            <input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:">
                            <input type="text" class="form-control test-product col-md-3" placeholder="Mærke">
                            <input type="text" class="form-control test-product col-md-3" placeholder="Model">
                            <input type="text" class="form-control test-product col-md-3" placeholder="Ny pris">
                        </div>
                    </div>  

                    <div align="right">
                        <button id="add_item" type="button" data-parent="#demo" href="#luk" class="btn-product btn-success">
                        TILF&Oslash;J
                        </button>
                    </div>  
                </div>
        </div>
    </div>

SCRIPT:

    $('.removeBtn').click(function(){
$(this).parent('div').next('div').andSelf().remove();
    });

    $('#add_item').click(function(){
    $('#demo').append('<div class="panel panel-default"><div class="panel-heading"><div class="row"><div class="col-md-8"><input class="form-test" placeholder="Produktnavn"></div><div class="col-md-2"><button type="button" class="removeBtn" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button></div></div></div><div id="luk" class="panel-collapse collapse in"><div class="panel-body rowbg"><div class="row rowbg"><input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"><input type="text" class="form-control test-product col-md-3" placeholder="Mærke"><input type="text" class="form-control test-product col-md-3" placeholder="Model"><input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"></div></div><div align="right"><button id="add_item" data-parent="#demo" href="#luk" type="button" class="btn-product btn-success">TILF&Oslash;J</button></div></div></div>').demo('destroy').demo(); });

    $(document).on('click', '.removeBtn', function(){
    $(this).parent('div').next('div').andSelf().remove();
    return false; });

Btw the attribute = TILFØJ = ADD on English. Translated to Danish

VERSION 2:

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.

Is there any solution to this problem?

Thank you in advance

Answer 1

It's because the data-attribute are only available on the page load.

If you dynamicly add elements, you have to affect the JS to new element.

And, like you will have many panels, don't use ID, it just be unique...

Bootply : http://www.bootply.com/122478

JS :

$toAppend = '<div class="panel panel-default"><div class="panel-heading"><div class="row"><div class="col-md-8"><input class="form-test" placeholder="Produktnavn"></div><div class="col-md-2"><button type="button" class="removeBtn" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button></div></div></div><div id="luk" class="panel-collapse collapse in"><div class="panel-body rowbg"><div class="row rowbg"><input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:"><input type="text" class="form-control test-product col-md-3" placeholder="Mærke"><input type="text" class="form-control test-product col-md-3" placeholder="Model"><input type="text" class="form-control test-product col-md-3" placeholder="Ny pris"></div></div><div align="right"><button id="add_item" data-parent="#demo" href="#luk" type="button" class="add_item btn-product btn-success">TILFØJ</button></div></div></div>';

makeAddable();
makeDelete();


  function makeCollapsable(){
    $('.form-test').unbind('click');
    $('.form-test').on('click', function(){
          $('.collapse').collapse('hide');
          $(this).parent().parent().parent().next().collapse('toggle');
    });    
  }

  function makeAddable(){
    $('.add_item').unbind('click');
    $('.add_item').on('click', function(){
          $('#demo').append($toAppend);
          makeAddable();
          makeDelete();
          makeCollapsable();
    });
  }      

  function makeDelete(){
       $('.removeBtn').unbind('click');
      $('.removeBtn').on('click', function(){
         $(this).parent().parent().parent().parent().remove();
       });
  }      

HTML :

<div class="panel-group" id="demo">
        <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-md-8"><input class="form-test" data-parent="#demo" data-toggle="collapse" href="#luk" placeholder="Produktnavn"></div>
                        <div class="col-md-2"><button type="button" data-parent="#demo" data-toggle="collapse" class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button></div>
                        <div class="col-md-2"><button type="button" class="removeBtn"><span class="glyphicon glyphicon-trash"></span></button></div>
                    </div>
                </div>
                <div id="luk" class="panel-collapse collapse in">
                    <div class="panel-body rowbg">
                        <div class="row rowbg">
                            <input type="text" class="form-control trin1 col-md-6" placeholder="Indtast Serie-, Stel-, IMEI-, eller Reg-. nr.:">
                            <input type="text" class="form-control test-product col-md-3" placeholder="Mærke">
                            <input type="text" class="form-control test-product col-md-3" placeholder="Model">
                            <input type="text" class="form-control test-product col-md-3" placeholder="Ny pris">
                        </div>
                    </div>  

                    <div align="right">
                        <button id="add_item" type="button" data-parent="#demo" href="#luk" class="add_item btn-product btn-success">
                        TILFØJ
                        </button>
                    </div>  
                </div>
        </div>
    </div>