JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<div class="item" data-sample1="2" data-muster1="3">Div 1</div>
<div class="item" data-sample1="3" data-muster1="3">Div 2</div>
<div class="item" data-sample1="4" data-muster1="3">Div 3</div>

JavaScript

/* initial values */
const SegmentCount = 2;

/* generate dynamic variables as there could be one to n of each */
for (let i = 1; i <= SegmentCount; i++) {
    eval("let [samplevariable" + i + "] = '0'");
    eval("let [mustervariable" + i + "] = '0'");
}

generateSampleValues();

/* .........                 */
/* do other stuff in between */
/* e.g.                      */

function generateSampleValues() {
  samplevariable1 = '2';
  samplevariable2 = 'x';
  mustervariable1 = '3';
  mustervariable2 = 'x';
}

/* .........                 */


filterAll();

/* filter */

function filterAll() {

  $( "div.item" )
    .filter(function( index ) {
      return $(this).data("sample1") == samplevariable1 &&
             $(this).data("muster1") == mustervariable1;
    }).css( "border", "3px double red" );
    
    // only the first Div should be marked
    
}