JSFiddle - React, Tailwind, and code Playground

by kapilrc

HTML

<div class="tabInfo">
          <ul>
              <li><input type="checkbox" categoryCode="${categoryCode}"
                parent="${facet.key}" class="case unique" name="case"
                id="${mapValue.code}" /> <label>${mapValue.code}</label>
              </li>
              <li><input type="checkbox" categoryCode="${categoryCode}"
                parent="${facet.key}" class="case unique" name="case"
                id="${mapValue.code}" /> <label>${mapValue.code}</label>
              </li>
              <li><input type="checkbox" categoryCode="${categoryCode}"
                parent="${facet.key}" class="case unique" name="case"
                id="${mapValue.code}" /> <label>${mapValue.code}</label>
              </li>
              <li><input type="checkbox" categoryCode="${categoryCode}"
                parent="${facet.key}" class="case unique" name="case"
                id="${mapValue.code}" /> <label>${mapValue.code}</label>
              </li>
          </ul>
          <div class="bottomLink">
            <a class="selectAll dSelAll" href="javascript:void(0)">Deselect All</a> 
              
                <a href="javascript:void(0)" class="viewAll">View More</a> 
              
          </div>
</div>


<div class="tabInfo">
          <ul>
              <li><input type="checkbox" categoryCode="${categoryCode}"
                parent="${facet.key}" class="case unique" name="case"
                id="${mapValue.code}" /> <label>${mapValue.code}</label>
              </li>
              <li><input type="checkbox" categoryCode="${categoryCode}"
                parent="${facet.key}" class="case unique" name="case"
                id="${mapValue.code}" /> <label>${mapValue.code}</label>
              </li>
              <li><input type="checkbox" categoryCode="${categoryCode}"
                parent="${facet.key}" class="case unique" name="case"
                id="${mapValue.code}" /> <label>${mapValue.code}</label>
              </li>
          ...

JavaScript

$(function() {
      
/* Select Toggle  */
    
     $('.tabInfo li input').attr('checked', true); 
    
    $('.dSelAll').live('click',function() {
        $(this).parents('.tabInfo').find('li input').attr('checked', false); 
        $(this).addClass('selAll').removeClass('dSelAll');
        $(this).text('Select All');
    });
    $('.selAll').live('click',function() {
        $(this).parents('.tabInfo').find('li input').attr('checked', true); 
        $(this).addClass('dSelAll').removeClass('selAll');
        $(this).text('Deselect All');
    });
    
});