JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
table{
    border:1px #666666 solid;
    background-color:#D9FEB7;
    width:93%;
}
#first_tr{
    background-color:#D4D8C8;
}
td{
    text-align:center;
}
#first_tr>td{
    font-weight:600;
}
.raz{
    width:15%;
    cursor:pointer;
}
tr:nth-child(even){
    background-color:#EAFFEC;
}
</style></head>
<script>
alert(11)
function click()       
{
    ob=event.srcElement;

    
    if(ob.outerText=="M" ){
        alert(ob.outerText)
        alert(ob.nextSibling.nextSibling.nextSibling.nextSibling.outerText)
    }
    if(ob.outerText=="L" ){
        alert(ob.outerText)
        alert(ob.nextSibling.nextSibling.outerText)
    }

}    
    document.ondblclick  = click;
</script>

<center>
<table border="1" cellspacing="1" cellpadding="4">
    <tr id="first_tr">
        <td >#</td>
        <td >Quantity</td>
        <td >Price</td>
    </tr>
    <tr>
        <td >M</td>
        <td >L</td>
        <td >15.99</td>
    </tr>
    <tr>
        <td >M</td>
        <td >L</td>
        <td >125.99</td>
    </tr>
    <tr>
        <td >M</td>
        <td >L</td>
        <td >211.69</td>
    </tr>
    <tr>
        <td >M</td>
        <td >L</td>
        <td >500.69</td>
    </tr>
</table>
</center>


</body>
</html>

CSS

table{
    border:1px #666666 solid;
    background-color:#D9FEB7;
    width:93%;
}
#first_tr{
    background-color:#D4D8C8;
}
td{
    text-align:center;
}
#first_tr>td{
    font-weight:600;
}
.raz{
    width:15%;
    cursor:pointer;
}
tr:nth-child(even){
    background-color:#EAFFEC;
}