Get the first value from comma separated string in jquery

I am trying to create a filter option like this :

enter image description here

I am able to get the values from the comma separated string but not as expected as show below : enter image description here

On each click of checkbox on the left side I am getting the value of that checkbox and show it on the top right side. In case I select Option1, It shows Option1, then If I select Option2, then it shows Option1,Option1,Option2. I wish remove that Option1 at the beginning.

Below is my code:

 
$('input[type="checkbox"]').change(function()
                { 

                        if(!$(this).is(':checked'))
                           $('.badge li').remove();

                        var favorite = [];
            
            $.each($("input[name='category']:checked"), function(){            
                favorite.push($(this).val());
            });
            
            var selecte = favorite.join(",")[0];


            $(".badge").append($("<li>").css({float:'left'}).html(selecte));

                        var itemName = $('select option:selected').text(); 

                $('.uncheckall').show();

                        $('.smallapply').show();

                        var textinputs = document.querySelectorAll('input[type=checkbox]');

                        var empty = [].filter.call( textinputs, function( el )
                        {
                           return !el.checked
                        });

                        if (textinputs.length == empty.length)
                        {                           
                            $('.uncheckall').hide();

                                $('.smallapply').hide();
                        }

                });     

<ul class="list-unstyled scrollbar" id="style-3">

                 <li>
                  <label class="custom-control custom-checkbox">
                  <input type="checkbox" name="category" id="checkbox1" value="option1" class="custom-control-input">
                  <small class="custom-control-indicator"></small>
                  <small class="custom-control-description">Option1</small>
                  </label>
                </li>

                <li>
                 <label class="custom-control custom-checkbox">
                 <input type="checkbox" name="category" id="checkbox2" value="option2" class="custom-control-input">
                 <small class="custom-control-indicator"></small>
                 <small class="custom-control-description">Option2</small>
                </label>
           </li>

           <li>
                <label class="custom-control custom-checkbox">
                <input type="checkbox" name="category" id="checkbox3" value="option3" class="custom-control-input">
                <small class="custom-control-indicator"></small>
                <small class="custom-control-description">Option3</small>
                </label>
           </li>
     </ul>