JSFiddle - React, Tailwind, and code Playground

by harifrais

HTML

<div class="right-filter-inner p-2">
  <div class="right-inner-PROCESSING_TIME">
    <h4>PROCESSING_TIME</h4>
    <div class="top-checks rgt-report-sector" data-simplebar="init">
      <div class="simplebar-track vertical" style="visibility: visible;">
        <div class="simplebar-scrollbar" style="top: 2px; height: 25px;"></div>
      </div>
      <div class="simplebar-track horizontal" style="visibility: hidden;">
        <div class="simplebar-scrollbar"></div>
      </div>
      <div class="simplebar-scroll-content" style="padding-right: 17px; margin-bottom: -34px;">
        <div class="simplebar-content" style="padding-bottom: 17px; margin-right: -17px;">
          <div class="filter-metrics">
            <label class="custom-control">
										<input type="search" class="material-control-input filter-search" id="top-filter-search-PROCESSING_TIME">
									</label>
            <label class="custom-control material-checkbox filter-label">
										<input type="checkbox" class="material-control-input top-filter-all" value="all" checked="">
										<span class="material-control-indicator"></span>
										<span class="material-control-description">All</span>
									</label>
            <label class="custom-control material-checkbox filter-label">
										<input type="checkbox" name="PROCESSING_TIME" class="material-control-input filter-option top-filter-20181001" value="2018-10-01" id="top-filter-20181001" checked="">
										<span class="material-control-indicator"></span>
										<span class="material-control-description">2018-10-01</span>
									</label>
            <label class="custom-control material-checkbox filter-label">
										<input type="checkbox" name="PROCESSING_TIME" class="material-control-input filter-option top-filter-20181002" value="2018-10-02" id="top-filter-20181002" checked="">
										<span class="material-control-indicator"></span>
										<span...

JavaScript

function buildFilter() {

  var arrElements = [];
  $('.right-filter-inner').find('h4').each(function(i) {
    var filter = $(this).text();
    var arrChecked = [];
    $('.right-inner-' + filter + ' .material-control-input:checked').each(function() {
     	if ($(this).val() != 'All'){
     	 arrChecked.push("'" + ($(this).val()) + "'");
      }
    });
    var strFilter = arrChecked.join(',');
    arrElements.push(filter + ' IN (' + strFilter + ')');
  });


  $('#result').html(arrElements.join(', '));
}
buildFilter();