JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn">Press it</button>

<div class="object">
    <div class="header">
        <span class="name">4</span>
    </div>
    <div class="children">
        <div class="string">
            <div class="header">
                <span class="name">Cheese</span>
            </div>
        </div>
    </div>
</div>

<div class="object">
    <div class="header">
        <span class="name">Biscuits</span>
    </div>
    <div class="children">
        <div class="string">
            <div class="header">
                <span class="name">Cheese</span>
            </div>
        </div>
    </div>
</div>

<div class="object">
    <div class="header">
        <span class="name">0</span>
    </div>
    <div class="children">
        <div class="string">
            <div class="header">
                <span class="name">Cheese</span>
            </div>
        </div>
    </div>
</div>

CSS

* {margin: 0px; padding: 0px;}
body {background-color: rgb(248,248,248)}
#nav {
    list-style:none;
}
#nav li {
    float:left;
    display:block;
    width:100px;
    position:relative;
    z-index:500;
}
/* this is the parent menu */
 #nav li a {
    display:block;
    padding:15px;
    color:#000;
    border: 1px solid transparent;
}
#nav li a:hover {
    border: 1px solid black;
    
}
 #nav a.open {
    color:#fff;
    background-color: pink;
}
 #nav ul {
    position:absolute;
    display:none;
    padding:0;
    list-style:none;
}
#nav ul li {
    width:100px;
    float:left;
}
 #nav ul a {
    display:block;
    height:15px;
    padding: 15px;
    color:#666;
}
#nav ul a:hover {
    text-decoration:underline;
}
.active{
    background-color: pink;
    
}

JavaScript

$('#btn').click(function () {
         $('.object >  .header .name').text(function(i,o){
           if($.isNumeric(o)){
                 return $(this).parent().next().find('.header .name').text();
             }
         })
    });