Generate dynamic li elements depending on how many checkboxes are checked

Question

I am trying to generate li elements for each checkbox that has been checked. It works when there is only one checked, but when I check 2 checkboxes, only the last checkbox and its hidden inputs (hidden inputs used to populate specific values inside the li element) are generated.

Here is the code I use now:

attachPanelListeners : function() {
            $('#sc-accordion').bind('click', function(e) {
                var items, 
                    target = $(e.target);

                if ( target.hasClass('submit-add-to-menu') ) {
                    var t = $(this).parent().parent(),
                        checkboxes = t.find('.sc-pagelist li input:checked');

                    // If no items are checked, bail.
                    if ( !checkboxes.length )
                        return false;

                    var structure;
                    $(checkboxes).each(function(){
                        var hidden = $(this).closest('li').find(':hidden');
                        structure = ""+
                                        ""+
                                            ""+
                                                "" + hidden[0].value + ""+
                                                "Pagina"+
                                            ""+
                                        ""+
                                        ""+
                                            ""+
                                                "Navigatielabel"+
                                                ""+
                                            ""+
                                            ""+
                                                "Verplaatsen"+
                                                ""+
                                                ""+
                                                ""+
                                                ""+
                                                ""+
                                            ""+
                                            ""+
                                                "Verwijderen"+
                                            ""+
                                            ""+
                                            ""+
                                        ""+
                                    "";
                    });
                    $('#menu-to-edit').append(structure);
                    checkboxes.prop('checked', false);
                };
            })

        },

Cheers

user_930393 · Answer

You're assigning the string on each loop, rather than appending - meaning you only ever get the last one.

One option is to change...

structure = ""+

To...

structure += ""+

An alternative option is to append the string on each loop directly...

$(checkboxes).each(function(){
    var hidden = $(this).closest('li').find(':hidden');
    $('#menu-to-edit').append(
        ""+
          ""+
            ...
          ""+
        "");
});

user_6441124 · Answer

I made a simple example below ( as you didn't share the HTML and a bunch of code you shared is not relevant to the problem itself )

Basically you need to append to the existing HTML. WHat you are doing is replacing it with a new li every time you check a checkbox. So it overrides the previous html.

I also removed the corresponding li when the checkbox is unchecked.

THere might be a more straight forward solution out there but this is the best i came up with for now :)

var chkBox = $(".checkbox")
$(chkBox).on('change', function(){

  var index = $(this).index()
  var menuItem = `${index} list item`
    if ($(this).is(':checked') ) {
      $('.menu').html($('.menu').html() + menuItem)
    } else {
      $(`li.${index}`).remove()
    }
})

Generate dynamic li elements depending on how many checkboxes are checked

2 Answers