Prototype for Client (JQuery Help)

Hello Campers,

I’m working a prototype for a client and ran into a bit of a wall. I have a set of dropdown menus that contain a number of checkboxes. These checkboxes will be used to filter some information later on. For the purposes of the prototype, when a user selects a checkbox I would like to create a “tag” that shows them what they selected.

So far, I’m able to get the value of the checkbox to show, but it shows up as one continuous line of text. I haven’t been able to find a solution, that would create spaces between the values or break them up into seperate “tags.” Any advice would be much appreciated.

Here’s what I’m going for:

31

and Here’s my JQuery so far…

var checkBoxValues = function() {
            var values =[]
            $('.filter-option:checked').each(function() {
                values.push($(this).val());
            });
            return values;  
            
        };
        
        $('.filter-list').click(function() {
            $('.filter-selected').html(checkBoxValues).addClass('.option-selected');
            
        });

I hope I’ve explained well enough. I’m still fairly new to jquery @ javascript.