JSFiddle - React, Tailwind, and code Playground

by Cory Danielson

HTML

<div id="er1">er1 - click me</div>
<div id="er2">er2 - click me</div>
<div id="er3">er3 - click me</div>
<div id="er4">er4 - click me</div>
<div id="er5">er5 - click me</div>

<div id="cr1">cr1</div>
<div id="cr2">cr2</div>
<div id="cr3">cr3</div>
<div id="cr4">cr4</div>
<div id="cr5">cr5</div>

CSS

body {
    font-family: Tahoma;
    font-size: 12px;
}

div {
    padding: 5px;
}

.but-extra-on {
    background-color: #0f0;
}

.but-closerow-on {
    background-color: #f00;
}

.but-closerow-on {
    background-color: #f00;
}

.but-closerow-on {
    background-color: #f00;
}

JavaScript

var count = 1;
var curER = "div#er";

while ( count != 6 )
{
    $(curER + count).click({buddy: $("div:#cr"+count)}, function(e){
    $(this).toggleClass("but-extra-on");
    e.data.buddy.toggleClass("but-closerow-on");
});
count++;
}