JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div class="hws-css-filter">

  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td">T</div>
    <div class="hws-css-filter-td">H</div>
    <div class="hws-css-filter-td">I</div>
    <div class="hws-css-filter-td">S</div>
    <div class="hws-css-filter-td">I</div>
    <div class="hws-css-filter-td">S</div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>    
  </div>

  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td">L</div>
    <div class="hws-css-filter-td">D</div>
    <div class="hws-css-filter-td"></div>
     <div class="hws-css-filter-td">P</div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>   
  </div>
  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td">L</div>
    <div class="hws-css-filter-td">A</div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
     <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>   
  </div>

  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td">D</div>
    <div class="hws-css-filter-td">V</div>
    <div class="hws-css-filter-td">L</div>
    <div class="hws-css-filter-td"></div>
     <div class="hws-css-filter-td">K</div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>   
  </div>

  <div class="hws-css-filter-tr">
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td">I</div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
     <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>
    <div class="hws-css-filter-td"></div>   
  </div>

  <div...

CSS

.hws-css-filter {
  display: table;
  //border:1px solid #000;
  margin: auto;
  vertical-align: middle;
}

.hws-css-filter-tr {
  display: table-row;
  padding: 0;
  margin: 0;
}

.hws-css-filter-td {
  display: table-cell;
  border: 1px solid #000;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  font-family: monospace;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.hws-found {
  background-color: purple;
  color: white;
}



.selected {
  background-color: LightGreen;
  color: LightGreen;
}

.filter-let-select {
  background-color: blue;
  color: white;
}

JavaScript

$('.hws-css-filter-td').click(function() {
var wordsArr = $('#words').html().split("~")

//$( ".ishole" ).each(function() {  $(this).html("X")}); 
//  $(this).siblings().removeClass('selected');
if ($(this).is(".selected") &&  $("#movefilter").html()=="false") {

   $("#movefilter").html("true")
}
else if ($("#movefilter").html()=="false" && $(this).is(".canclick") && !$(this).is(".filter-let-select")) {
$(this).closest('.hws-css-filter-tr').nextAll().find('.ishole').first().addClass('canclick');
if ($(this).html()=="!") {
  if(jQuery.inArray($("#clickword").html(), wordsArr !== -1))
     $( ".ishole" ).each(function() {
     $(this).addClass('hws-found'); 
  });
     
   // alert ("found!")
}

$("#clickword").append($(this).html());
$(this).toggleClass('filter-let-select');

//$(this).closest('.hws-css-filter-tr').next().find('.ishole').addClass('canclick');

//$(this).closest('.hws-css-filter-tr').nextAll(':has(.ishole):first').addClass('canclick');
//$(this).parent('hws-css-filter').next('.ishole').html('^');
//$(this).closest('.hws-css-filter-tr').nextAll().find('.ishole').first().html('*')



//$(this).parents('hws-css-filter-tr').find('.ishole').html("#")

//$(this).closest('hws-css-filter-tr').nextAll().is('.ishole').html('^');
// var bob = $(this).closest('hws-css-filter-tr').nextAll('.ishole')[0];
//alert (bob)
//$(this).closest('hws-css-filter-tr').nextAll().find('.ishole').addClass('canclick');
//$(obj).closest('tr').nextAll(':has(.class):first').find('.class');

//$(this).nextAll('.ishole').html("*");
//$(this).next(".ishole").addClass("canclick");
// nextIndex.nextAll().andSelf().slice(0, 5).addClass('canclick');  
//find next that has 
//.closest('.form-group').find('.rddt').val('YES').focus();
//.find("div.focus").nextAll("div").not(".hidden").first()

}
 
else {  
  if ($("#movefilter").html()=="true") {
    $("#movefilter").html("false")
  }
  
  }
 //$('.hws-css-filter').removeClass('selected');
//  $(this).toggleClass('selected');
// ...