JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">Tab2</a></li>
    </ul>
    <div id="tabs-1">
        
            <p>Console.log shows 1 message : "Tab selected"</p>
        
            <div id="subtabs">
            <ul>
                <li><a href="#subtabs-1">Subtab1</a></li>
                <li><a href="#subtabs-2">Subtab2</a></li>
            </ul>
            <div id="subtabs-1">
                <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
            </div>
            <div id="subtabs-2">
               <p>Console.log shows 2 messages : "Subtab selected" & "Tab selected". I just want the Subtab selected.</p>
            </div>
        </div>

        
    </div>
    <div id="tabs-2">
        <p>Console.log shows 1 message : "Tab selected"</p>
    </div>
</div>

JavaScript

$("#tabs").tabs({
   select: function(event, ui) { console.log("Tab selected"); }
});
$("#tabs-1 > #subtabs").tabs({
   select: function(event, ui) { console.log("subTab selected"); }
});