JSFiddle - React, Tailwind, and code Playground

by neelam_cite

HTML

<span id="filter-7"></span>

<div class="panel-heading" role="tab" id="headingSkills">
  <div id="skillsCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSkills">
    <h4 class="panel-title">
      <a role="button" id="button-7" data-toggle="collapse" data-parent="#accordion" href="#skillsCollapse" aria-expanded="true" aria-controls="skillsCollapse">
        Skills
      </a>
    </h4>
  </div>
</div>

<label>
  <input type="checkbox" name="skills" value="Accounting">Accounting</label>
<label>
  <input type="checkbox" name="skills" value="Administration">Administration</label>
<label>
  <input type="checkbox" name="skills" value="Budgeting">Budgeting</label>
<label>

  <div id="filter-7-result"></div>

JavaScript

$('input:checkbox[name="skills"]').change(function() {
  var values = $('input:checkbox[name="skills"]:checked').map(function() {
    return '<span><button class="remove-selection" value="' + this.value.trim() + '"></button> ' + this.value.trim() + '</span>';
  }).get();

  $('#filter-7').append($('#headingSkills a').text());

  $('#filter-7-result').empty().append(values);
});