JSFiddle - React, Tailwind, and code Playground

by demos12

HTML

<table>
  <tr>
     <td><div class="clickme">Click Me</div></td>
  </tr>
  <tr></tr>
  <tr>
    <td>
      <select name="" id="test">
        <option value="test1" class="enabled"></option>
        <option value="test2" class="enabled"></option>
        <option value="test3"></option>
      </select>
      <div>
        <div class="test" data-option="test1">Test1</div>
        <div class="test" data-option="test2">Test2</div>
        <div class="test" data-option="test3">Test3</div>
      </div>
    </td>
  </tr>
</table>
<div class="result"></div>

CSS

.disabled {
  display: none;
}

JavaScript

/*$('#home .box').mouseover(function(){

var hovBox = $(this);
var prevAll = hovBox.prevAll('.box');
var nextAll = hovBox.nextAll();

     prevAll.each(function(index){

           $(this).fadeTo('fast', index/5);
     });
});*/
$(document).ready( function() {
  function capitalizeFirstLetter(string) {
      return string.charAt(0).toUpperCase() + string.slice(1);
  }

  jQuery('.clickme').on('click', function() {

    var label = jQuery("#test option").val();

    //jQuery(".result" ).html( "<span>" + capitalizeFirstLetter(label) + "</span><span>" );

    var enabled_options = [];
    var nextSelect = $(this).parents('tr').nextAll().eq(1).find('select .enabled');
    jQuery(nextSelect).each(function($) {
       enabled_options.push(jQuery(this).val());
    });
    
		jQuery(jQuery(this).parents('tr').nextAll().eq(1).find("[data-option]")).each(function () {
      var dataValue = jQuery(this).data("option");
      console.log("dataValue " + dataValue + " is a " + typeof(dataValue));
      if(jQuery.inArray(""+dataValue, enabled_options) == -1) { // f
      		jQuery(this).addClass('disabled');
      }
      /*if( jQuery.inArray(dataOption, enabled_options != -1 ) ) {
        jQuery(this).addClass('disabled');
      }
    	console.log();*/
    });
    
    //jQuery('.result').html(enabled_options);
    console.log(enabled_options);


  });

});