JSFiddle - React, Tailwind, and code Playground

by timmah

HTML

<h2 id="active">Active ingredient changes</h2>
<label for="filter-field">Filter the table: </label>
<input class="filter-field" placeholder="Search" type="text">
<table class="filter-item" class="datatable">
  <thead>
    <tr>
      <th scope="col">Old name</th>
      <th scope="col">New name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="nohide">
      <th colspan="2" class="thlevel2" id="dual-labelling">Dual labelling (these ingredient will need to show both the old and new name on the product label for three years after the transition period)</th>
    </tr>
    <tr>
      <td>Actinomycin D</td>
      <td>dactinomycin (actinomycin D)</td>
    </tr>
    <tr>
      <td>Amethocaine hydrochloride</td>
      <td>tetracaine (amethocaine) hydrochloride</td>
    </tr>
    <tr>
      <td>Amphotericin</td>
      <td>amphotericin B (amphotericin)</td>
    </tr>
    <tr>
      <td>Amylobarbitone sodium</td>
      <td>amobarbital (amylobarbitone) sodium</td>
    </tr>
    <tr>
      <td>Bacillus Calmette and Guerin</td>
      <td>Mycobacterium bovis (Bacillus Calmette and Guerin (BCG) strain)</td>
    </tr>
    <tr>
      <td>Benzhexol hydrochloride</td>
      <td>trihexyphenidyl (benzhexol) hydrochloride</td>
    </tr>
    <tr>
      <td>Colaspase</td>
      <td>asparaginase (colaspase)</td>
    </tr>
    <tr>
      <td>Co-methylcobalamin</td>
      <td>mecobalamin (co-methylcobalamin)</td>
    </tr>
    <tr>
      <td>Crystal violet CI42555</td>
      <td>methylrosanilinium chloride (Crystal violet CI42555)</td>
    </tr>
    <tr>
      <td>Cysteamine bitartrate</td>
      <td>mercaptamine (cysteamine) bitartrate</td>
    </tr>
    <tr>
      <td>Dothiepin hydrochloride</td>
      <td>dosulepin (dothiepin) hydrochloride</td>
    </tr>
    <tr>
      <td>Doxycycline hydrochloride</td>
      <td>doxycycline hyclate (hydrochloride)</td>
    </tr>
    <tr>
      <td>Eformoterol</td>
      <td>formoterol (eformoterol)</td>
    </tr>
    <tr>
      <td>Eformoterol...

JavaScript

(function($) {

	// Global functions

	var fieldCounter = 0;

	$('.filter-field').each(function() {
  
		fieldCounter++
  	
		console.log(fieldCounter);
    
		var $this = $('this'),
    		$target = $this.next('.filter-item');

    console.log('filter-field: ' + $this.attr('class'));
    console.log('filter-item: ' + $target);
	})

	var currentEntries = $('#filterItem tbody tr:visible').not('tr.nohide').length;

  function entryCount() {

    var currentEntries = $('#filterItem tbody tr:visible').not('tr.nohide').length;

    if (currentEntries === 0) {
      $('#filterResult').html('No entries found');
    } else if (currentEntries === 1) {
      $('#filterResult').html('<strong>1</strong> entry found');
    } else {
      $('#filterResult').html('<strong>' + currentEntries + '</strong> entries found');
    }
  }

  entryCount();

  // onLoad
  $(function() {

    // Get number of entries
    var entries = $('#filterItem > tbody > tr').not('tr.nohide').length

    // Add results counter, checking if it already exists first
    if (!$('#filterResult').length) {
      $("#filter-field").after('<p id="filterResult"><strong>' + entries + '</strong> entries listed</p>');
    }
  });

  // This makes ':contains' case insensitive. Thanks Chris :)
  $.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function(elem) {
      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
  });


  // Detect all changes to the input field. Use 'keyup', as this detects backspaces that empty the field
  $("#filter-field").bind('keyup', function() {

    // Split the current value of searchInput, and set the results counter
    var contents = this.value,
      data = this.value.split(" "),
      count = 0;

    // Check if the text field is empty
    if (!contents.match(/\S/)) {
      $("#filterResult").html('<strong>' + currentEntries + '</strong> entries listed');
    }


    // Remove an highlighting from previous filtering
   ...