JSFiddle - React, Tailwind, and code Playground

HTML

<div id="er1" data-buddy="div#cr1">er1 - click me</div>
<div id="er2" data-buddy="div#cr2">er2 - click me</div>
<div id="er3" data-buddy="div#cr3">er3 - click me</div>
<div id="er4" data-buddy="div#cr4">er4 - click me</div>
<div id="er5" data-buddy="div#cr5">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;
}

JavaScript

var count = 1;
var curER = "#er";
var curCR = "#cr";

while ( count != 6 )
{

$(curER + count).click(function(){
    $(this).toggleClass("but-extra-on");
    $($(this).data("buddy")).toggleClass("but-closerow-on");
});
count++;
}