title: How can I allow a specific section to have multi selection?
body: <p>I'm working on step by step order, and I am so thankful for having received plenty of help from others already. I'm still not done asking, though!</p>
  
  <p>My steps are divided into different <code>&lt;section&gt;</code> and I would like to give a <code>&lt;section&gt;</code> a <code>class="multiple"</code> to allow this specific section to have multiple selections. I use <code>.selected</code> to determine either the if <code>&lt;li&gt;</code> has been selected or not. </p>
  
  <p>This is my current code:</p>
  
  <pre><code>$('li').on('click', function(e) {
     e.preventDefault();
     // remove selected class from links after the current one
     $(this).closest('section').nextAll('section').find('li').removeClass('selected');
     // remove selected from siblings, toggle current selected class
     $(this).siblings('li').removeClass('selected').end().toggleClass('selected');
     var $target = $('#' + $(this).attr('data-id'));
     if ($target.length) {
         // hide any steps after the current one that may be shown
         $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
         // toggle display of selected step
         $target.toggleClass('active', $(this).hasClass('selected'));
     } else {
         console.log('do something else to end this thing');
     }
  })
  </code></pre>
  
  <p>So my question is, what can I do with my code to make <code>&lt;section class="multiple&gt;</code> allowing multiple selected items? </p>
  
  <p><a href="https://jsfiddle.net/superladremi/979aL2g5/6/" rel="nofollow noreferrer">This is my JSFiddle</a>. Click on the items to get the last step, which should be the section that allows multiple selections. </p>
  
  <p>Thanks for the help.  </p>