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

$('div').each(function(ix) {
  $(this).html('div index of ' + ix);
})

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