JSFiddle - React, Tailwind, and code Playground

by neelam_cite

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-6">
    <p>Skills:</p>
  </div>
  <div class="col-md-6">
    <p class="filter" id="filter-2-result"><span class="deselect"></span></p>
  </div>
</div>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingSkills">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#skillsCollapse" aria-expanded="true" aria-controls="skillsCollapse">
          Skills
        </a>
      </h4>
    </div>
    <div id="skillsCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSkills">
      <div class="panel-body">
        <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>
      </div>
    </div>
  </div>

JavaScript

$('input:checkbox[name="skills"]').change(
  function() {
    if ($(this).is(':checked')) {
      $('<span />').appendTo('#filter-2-result').text($(this).val());
    } else {
      $('#filter-2-result:contains(' + $(this).val() + ')').remove();
    }
  });