JSFiddle - React, Tailwind, and code Playground

by demos12

HTML

<table class="variations">
  <tr><td><label>1</label></td></tr>
  <tr>
    <td>
      <div class="attribute-swatch">
        <div class="swatchinput" data-option="BLACK">Black</div>
        <div class="swatchinput" data-option="GREY">Grey</div>
      </div>
      <div class="selection-result"></div>
    </td>
  </tr>
  <tr><td><label>2</label></td></tr>
  <tr>
    <td>
      <div class="attribute-swatch">
        <div class="swatchinput" data-option="SEAT PAD ONLY">Seat Pad Only</div>
        <div class="swatchinput" data-option="CUSHION SET">Cushion Set</div>
      </div>
      <div class="selection-result"></div>
    </td>
  </tr>
  <tr><td><label>3</label></td></tr>
  <tr>
    <td>
      <div class="attribute-swatch">
        <div class="swatchinput" data-option="RED">Red</div>
        <div class="swatchinput" data-option="BLUE">Blue</div>
        <div class="swatchinput" data-option="GREEN">Green</div>
      </div>
      <div class="selection-result"></div>
    </td>
  </tr>
  <tr><td><label>4</label></td></tr>
  <tr>
    <td>
      <div class="attribute-swatch">
        <div class="swatchinput" data-option="YES">Yes</div>
        <div class="swatchinput" data-option="NO">No</div>
      </div>
      <div class="selection-result"></div>
    </td>
  </tr>
</table>

CSS

.swatchinput {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 15px 10px;
  width: 100px;
  display: inline-block;
  cursor: pointer;
}

.selection-result {
  display: none;
  width: 300px;
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  padding: 15px 10px;
}

.variations tr:not(:nth-child(n+2)) .swatchinput {
  pointer-events: none;
  opacity: 0.3;
}

JavaScript

$('table tr:nth-child(n+3) .swatchinput').css('opacity', '0.3');
$('table tr:nth-child(n+3) .swatchinput').css('pointer-events', 'none');

$(".variations tr td .swatchinput").on('click', function() {
	var variant = $(this).data('option');
  $(this).parent('.attribute-swatch').fadeOut(500);
  $(this).parents('tr').find('.selection-result').fadeIn(500);
  $(this).parents('tr').find('.selection-result').append(variant);
  $(this).parents('tr').nextAll('tr').eq(1).find('.swatchinput').css('pointer-events', 'auto').css('opacity', '1');
});

$(".variations tr td .selection-result").on('click', function() {
  $(this).parents('tr').find('.attribute-swatch').fadeIn(500);
  $(this).parents('tr').nextAll('tr').find('.attribute-swatch').fadeIn(500);
  $(this).fadeOut(500);
  $(this).parents('tr').nextAll('tr').find('.selection-result').fadeOut(500);
});

/* $("table tr td").click(function() {
  $(this).closest('tr').nextAll('tr').css('color','red');
}); */