JSFiddle - React, Tailwind, and code Playground

by hbsto

HTML

<ul>
  <li data-depth="1">1</li>
  <li data-depth="2">2</li>
  <li data-depth="2">2</li>
  <li data-depth="3">3</li>
  <li data-depth="3">3</li>
  <li data-depth="3">3</li>
  <li data-depth="1">1</li>
  <li data-depth="2">2</li>
  <li data-depth="3">3</li>
  <li data-depth="1">1</li>
</ul>

CSS

LI[data-depth="1"]{ margin-left: 0px; }
LI[data-depth="2"]{ margin-left: 20px; }
LI[data-depth="3"]{ margin-left: 40px; }

JavaScript

const $all = $('LI').css('cursor', 'pointer');

$('LI').click((e) => {
  const $target = $(e.target);
  const depth = +$target.data('depth');
  const $els = $target.nextUntil(`LI[data-depth=${depth}]`);
  const $filtered = $els.filter((idx, el) => +$(el).data('depth') > depth);
  $all.css('color', 'black');
  $filtered.css('color', 'red');
});