JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<a href="#">link</a>

<div class="element-item">element 1</div>
<div class="element-item">element 2</div>
<div class="element-item">element 3</div>
<div class="element-item">element 4</div>
<div class="element-item">element 5</div>
<div class="element-item">element 6</div>
<div class="element-item">element 7</div>
<div class="element-item">element 8</div>
<div class="element-item">element 9</div>
<div class="element-item">element 10</div>
<div class="element-item">element 11</div>

CSS

.newClass {
  border: 1px solid #000;
}

.element-item {
  padding: 5px;
}

JavaScript

$('a').click(function() {
  $('div:not(.newClass)').each(function(ix) {
    $(this).addClass('newClass')
    return (ix < 4)
  })
})