JSFiddle - React, Tailwind, and code Playground

by dhavalbharadva

HTML

<table>
        <tr>
            <td><a href="#" class="myLink" id="1">this is 1</a>
            </td>
        </tr>
        <tr>
            <td>
                <div align="justify" id="div_dom1" class="myClass">
                    <table>
                        <tr>
                            <td>Text will display here for 1</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td><a href="#" class="myLink" id="2">this is 2</a>
    
            </td>
        </tr>
        <tr>
            <td>
                <div align="justify" id="div_dom2" class="myClass">
                    <table>
                        <tr>
                            <td>Text will display here for 2</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
        <tr>
            <td><a href="#" class="myLink" id="3">this is 3</a>
    
            </td>
        </tr>
        <tr>
            <td>
                <div align="justify" id="div_dom3" class="myClass">
                    <table>
                        <tr>
                            <td>Text will display here for 3</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>

CSS

.myClass {
    display: none;
}

JavaScript

$(document).ready(function () {
        $(".myLink").on('click',function(){
            $(".myClass").hide();
            var divno =  $(this).attr('id');
            $("#div_dom" + divno).show();
        });
    });