javascript - How to append checkbox value to specific category it belongs -

i have check-boxes values belong different categories (e.g. movies, music, books etc.). when user checks check-box value gets appended want category name appended too, first time.

example :

1. the user checks "mad max" under movies category.
2. the <li> checkbox value get's appended , "movies" gets appended on top of it.
3. the user checks "back future", time category name should not appended because there.

also, if user unchecks check-box value erased , if last value left, category name removed.

i have tried several ways, biggest problem dealing category name.

this i've got far..

(function() {       $('input:checkbox').on('change', function() {          // value of checkbox         var value = $(this).parent('label').text();          // value of category name         var categoryname = $(this).parents('.modal-body').siblings('.modal-header').children('.modal-title').text();          //where append items         var list = $('#checkbox-list');          if ($(this).is(':checked')) {              $('<span class="item-filter" />' + '<br>').prependto(list).html('<a href="#" id="delete-filter">x</a>' + value);              $('<span class="category-title" />' + '<br>').prependto(list).text(categoryname);          } else {             $('#checkbox-list span:contains(' + value + ')').remove();         }          //show reset , save buttons           $('.filterbutton').css('display', 'inline-block');           // close button (vissualy delete filter , uncheck specific checkbox)          $('#filter-sidebar').on('click', '#delete-filter', function(e) {              e.preventdefault();              var item = $(this).parents('.item-filter');             item.remove();              //reset specific checkbox             $('label:contains(' + itemvalue + ')').closest('input:checkbox').prop('checked', false);          })     });       // reset button       $('#resetfilters').on('click', function(){          //visually empty list         $('#checkbox-list').slideup().empty();         $('.filterbutton').css('display', 'none');          //reset checkboxes          $('input:checkbox').prop('checked', false);     });   })(); 

ok i'm not @ sure after post wasn't clear, give idea of how go this.

here's demo.

one of key points note use of .data() function access custom data attributes add html elements. have used them in code below add category values each checkbox.

so in html have:

<input type="checkbox" value="mad max" data-category="movies"> 

and can access in jquery so:

$checkedbox.data('category') // "movies"

i have tried explain as can in comments. hope helps.

script.js

// shorthand $(document).ready(handler) $(function() {      var $groupcontainers  = $('.group-containers'),          // out 'model': list of objects representing user choices         userchoices       = [];      $('input:checkbox').on('change', function() {          var $checkedbox     = $(this),             checkedboxlabel = $checkedbox.parent('label').text(),             checkedvalue    = $checkedbox.val(),              category        = $checkedbox.data('category'),             alreadychecked  = !$checkedbox[0].checked;           if(alreadychecked){           removechoicefrommodel(category, checkedvalue);         } else {           addchoicetomodel(category, checkedvalue);         }          updatedom();          return;         /////////////////////////////////////////////////////////          function cleangroupcontainers(){           $groupcontainers.each(function(){               var list = $(this).find('ul');                if(list.length){                 list.remove();               }           });         }           function updatedom(){            // reset dom - not efficient easier           // keep list state in sync           cleangroupcontainers();           appendchoices();           hideemptylists();         }        function appendchoices(){           var i, option, $categorydiv,              len = userchoices.length;          // if len === 0 no need check         if(!len) return false;          for(i = 0; < len; i++){           option        = userchoices[i];           $categorydiv  = $('#' + option.category + '-container');            $categorydiv.append('<ul><li>'+option.value+'</li></ul>');          }        }        function hideemptylists(){          $groupcontainers.each(function(){             var $container = $(this),                 items = $container.find('ul > li');              if(!items.length){               $container.hide();               // skip next iteration               return true;             }              $container.show();         });       }        function addchoicetomodel(category, value){         userchoices.push({           category: category,           value: checkedvalue         });       }        function removechoicefrommodel(category, value){          var i, option,              len = userchoices.length;          // if len === 0 no need check         if(!len) return false;          for(i = 0; < len; i++){           option = userchoices[i];            if(option.category === category && option.value === value){             // remove choice object array             userchoices.splice(i, 1);             return;           }         }        }      });   }); 

index.html

<!doctype html> <html>    <head>     <meta charset="utf-8" />     <title></title>     <link rel="stylesheet" href="style.css" />     <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>     <script src="script.js"></script>   </head>    <body>      <div>       <h4>movies</h4>       <label><input type="checkbox" value="mad max" data-category="movies"> mad maxx</label>       <label><input type="checkbox" value="pulp fiction" data-category="movies"> pulp fiction</label>     </div>      <div>       <h4>music</h4>       <label><input type="checkbox" value="justin bieber" data-category="music"> justin bieber</label>       <label><input type="checkbox" value="one direction" data-category="music"> 1 direction</label>     </div>      <div>       <h4>books</h4>       <label><input type="checkbox" value="dracular" data-category="books"> dracular</label>       <label><input type="checkbox" value="trainspotting" data-category="books"> trainspotting</label>     </div>       <div id="checkbox-list">       <div id="movies-container" class="group-containers">         <h3>movies</h3>       </div>       <div id="music-container" class="group-containers">         <h3>music</h3>       </div>       <div id="books-container" class="group-containers">         <h3>books</h3>       </div>      </div>       </body>  </html> 

style.css

.group-containers{   display: none; }