JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="header-list">
    <li>
        Some Text #1
    </li>
    <li>
        Some Text #2
    </li>
    <li>
        Some Text #3
    </li>
</ul>

<ul id="content-list">
    <li>
        SOme Content of 1
        <a class="open-specific" content-to-open="1">[Open INDEX 1]</a>
    </li>
    <li>
        SOme Content of 2 <a class="open-specific" content-to-open="2" id="open-2">Open INDEX 2</a>
    </li>
    <li>
        SOme Content of 3
        <a class="open-specific" content-to-open="0">[Open INDEX 0]</a>
    </li>
</ul>

<a class="open-specific" content-to-open="3">[Error - Open 3]</a>

JavaScript

$(document).ready(function() {
    $("#content-list li").hide();
    $("#header-list li").click(function() {
        var i = $(this).index();
        $("#content-list li").eq(i).toggle("slow").siblings().hide();
    });
    
    $(".open-specific").click(function() {
        var indexToClick = +$(this).attr("content-to-open");
        console.log("About to open index: " + indexToClick);
        if ($("#header-list li")[indexToClick] == null)
            alert("You are trying to click on an index that doesn't exist");
        else
            $("#header-list li")[indexToClick].click();   
     });
});