JSFiddle - React, Tailwind, and code Playground
HTML
<div class="list1">
<div class="left">л1</div>
</div>
<div class="list2">
<div class="right">п2</div>
</div>
<div class="list3">
<div class="left">л3</div>
</div>
<div class="list4">
<div class="right">п4</div>
</div>
<div class="list5">
<div class="left">л5</div>
</div>
<div class="list6">
<div class="right">п6</div>
</div>
CSS
.right {float:right;margin-top:20px;}
.left {float:left;margin-top:20px;}
.list1 {display:none;}
.list2 {display:none;}
.list3 {display:none;}
.list4 {display:none;}
.list5 {display:none;}
.list6 {display:none;}
JavaScript
var crntnumL = 1;
var crntnumR = 2;
var r_href = ".list"+crntnumR+" .right";
var l_href = ".list"+crntnumL+" .left";
alert (r_href);
$(".list"+crntnumL).css("display","block");
$(".list"+crntnumR).css("display","block");
$(r_href).click(function ()
{
$(".list"+crntnumL).css("display","none");
$(".list"+crntnumR).css("display","none");
crntnumL = crntnumL+2;
crntnumR = crntnumR+2;
r_href = ".list"+crntnumR+" .right";
l_href = ".list"+crntnumL+" .left";
$(".list"+crntnumL).css("display","block");
$(".list"+crntnumR).css("display","block");
console.log (r_href);
});
$(l_href).click(function ()
{
$(".list"+crntnumL).css("display","none");
$(".list"+crntnumR).css("display","none");
crntnumL = crntnumL-2;
crntnumR = crntnumR-2;
r_href = ".list"+crntnumR+" .right";
l_href = ".list"+crntnumL+" .left";
$(".list"+crntnumL).css("display","block");
$(".list"+crntnumR).css("display","block");
alert (r_href+" "+l_href);
});