JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<div id="box1" name="box1" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">
    <span id="minus1">&nbsp;<b>-</b></span><span id="plus1">&nbsp;<b>+</b></span> Category 1
  
</div>
<div  id="box2"  name="box2" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">  <span id="minus2">&nbsp;<b>-</b></span><span id="plus2">&nbsp;<b>+</b></span> Category 1
</div>
<div  id="box3"  name="box3" style="background:#3d70a3;height:30px;width:100px;margin:3px;color:white;">  <span id="minus3">&nbsp;<b>-</b></span><span id="plus3">&nbsp;<b>+</b></span> Category 1
</div>

JavaScript

$(document).ready(function(){
       $("#plus1,#plus2,#plus3,#minus1,#minus2,#minus3").css( 'cursor', 'pointer' );
       $("#minus1,#minus2,#minus3").hide();
    $("#plus1").click(function(){
       //var val2 = $("[Name='t1']").val()
       // var val3 = "[Name= " + val2 + "]" ;
       
       // $(val3).animate({height: "100px"});
       $("#box1").animate({height: "100px"});
       $("#plus1").hide();
       $("#minus1").show();
    });
    $("#minus1").click(function(){
       //var val2 = $("[Name='t1']").val()
       //var val3 = "[Name= " + val2 + "]" ;
        $("#box1").animate({height: "30px"});
        $("#plus1").show();
       $("#minus1").hide();
    });
       
      $("#plus2").click(function(){
       //var val2 = $("[Name='t1']").val()
       // var val3 = "[Name= " + val2 + "]" ;
       
       // $(val3).animate({height: "100px"});
       $("#box2").animate({height: "100px"});
       $("#plus2").hide();
       $("#minus2").show();
    });
    $("#minus2").click(function(){
       //var val2 = $("[Name='t1']").val()
       //var val3 = "[Name= " + val2 + "]" ;
        $("#box2").animate({height: "30px"});
        $("#plus2").show();
       $("#minus2").hide();
    });
    $("#plus3").click(function(){
       //var val2 = $("[Name='t1']").val()
       // var val3 = "[Name= " + val2 + "]" ;
       
       // $(val3).animate({height: "100px"});
       $("#box3").animate({height: "100px"});
       $("#plus3").hide();
       $("#minus3").show();
    });
    $("#minus3").click(function(){
       //var val2 = $("[Name='t1']").val()
       //var val3 = "[Name= " + val2 + "]" ;
        $("#box3").animate({height: "30px"});
        $("#plus3").show();
       $("#minus3").hide();
    });

       
       
       
       
       
       $("#btn5").click(function(){
        $("h1, h2, p").toggleClass("blue");
    });
       $("#btn6").click(function(){
       var val2 = $("[Name='t1']").val()
       var val3 = "[Name= " + val2 + "]" ;
       
      ...