JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<table width="100%" border>
  <tr>
    <td>
      <div class="list js-list-one">
        <div class="list__item">Lorem ipsum.</div>
        <div class="list__item">Quia, similique.</div>
        <div class="list__item">Ipsum, libero!</div>
        <div class="list__item">Quia, itaque?</div>
        <div class="list__item">Laudantium, adipisci.</div>
      </div>
      <button class="js-button-one">one</button>
    </td>
    
    <td>
      <div class="list js-list-two">
        <div class="list__item">Lorem ipsum.</div>
        <div class="list__item">Ea, dolore.</div>
        <div class="list__item">Architecto, ab.</div>
        <div class="list__item">Eius, quidem.</div>
        <div class="list__item">Reiciendis, fugit!</div>
      </div>

      <button class="js-button-two">two</button>
    </td>
  </tr>
</table>

SCSS

.list {
  &_toggle &__item:nth-child(2n+1) {
    background-color: red;
    color: yellow;
  }
  
  &__item_selected {
    background-color: lime;
  }
}

JavaScript

const listOne = document.querySelector('.js-list-one');
const buttonOne = document.querySelector('.js-button-one');
const listTwo = document.querySelector('.js-list-two');
const buttonTwo = document.querySelector('.js-button-two');
let classOne = '';
let classTwo = '';

///////////////////////////////////////
// CASE 1
buttonOne.onclick = function() {
	classOne = classOne ? '' : 'list_toggle';

	listOne.setAttribute('class', `list ${classOne}`);
};

///////////////////////////////////////
// CASE 2
buttonTwo.onclick = function() {
	classTwo = classTwo ? '' : 'list__item_selected';

	Array.from(listTwo.querySelectorAll('.list__item'))
		.filter((el, index) => !(index % 2))
		.forEach(el => el.setAttribute('class', `list__item ${classTwo}`));
}