JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div class="live-mu-table" >
    <div class="live-mu-table-tr">
        <div class="live-mu-table-tdq" id="a-1">q1</div>
        <div class="live-mu-table-tdspacer1"></div>
        <div class="live-mu-table-tda" id="a-3">A3</div>
    </div>
    
    <div class="live-mu-table-tr">
        <div class="live-mu-table-tdq" id="q-2">q2</div>
        <div class="live-mu-table-tdspacer1"></div>
        <div class="live-mu-table-tda" id="a-1">A1</div>
    </div>

    <div class="live-mu-table-tr">
        <div class="live-mu-table-tdq" id="q-3">q3</div>
        <div class="live-mu-table-tdspacer1"></div>
        <div class="live-mu-table-tda" id="a-2">A2</div>
    </div>

</div>

<div id="test1">test</div>

CSS

.live-mu-table{
    display: table;
    background-color:Azure;
    margin-bottom: 5px;
    padding-bottom: 5px;
    position:relative;
margin-left: auto;
 margin-right: auto;	
 width:80%;
// border-collapse: collapse;
}
.live-mu-table-tr{
    display: table-row; 
    height:30px;
}
.live-mu-table-tdq{
   display: table-cell;
  border:1px solid #000;
  //  width: 30px;
    width:60%;
    text-align:center;
   vertical-align:middle;	
   cursor: pointer;	

}
.live-mu-table-tdq:hover{
  background-color: yellow;
  border:2px solid #000;
}
.live-mu-table-tda{
   display: table-cell;
    border:1px solid #000;
   // width: 30px;
    width:30%;
    text-align:center;
   vertical-align:middle;
cursor: pointer;   
}
.live-mu-table-tda:hover{
  background-color: yellow;
  border:2px solid #000;
}
.live-mu-table-tdspacer1{
   display: table-cell;
    border:1px solid #000;
   // width: 30px;
    width:10%;
    text-align:center;
   vertical-align:middle;	

}

JavaScript

$(".live-mu-table-tdq").click(function() { 
  alert ("the value is: "+this.id)  
});

 $("#test1").click(function() { 
   $(".live-mu-table").html("");
   
   var newHtML = '<div class="live-mu-table-tr"><div class="live-mu-table-tdq" id="a-1">q1</div><div class="live-mu-table-tdspacer1"></div><div class="live-mu-table-tda" id="a-3">A3</div></div>';
   
    
  $(".live-mu-table").html(newHtML);
 
 
  alert ("boo")
});