JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div class="SideCategoryListFlyout">
                        <ul class="sf-menu sf-vertical sf-js-enabled">
<li class=""><a href="/shop-ipod/" class="sf-with-ul">Shop iPod<span class="sf-sub-indicator"> »</span></a><ul style="visibility: hidden; display: none;">
<li><a href="/accessories-2/">Accessories</a></li>
<li><a href="/iphone-cases-32/">iPhone Cases 32</a></li>

</ul>
</li>
<li class=""><a href="/shop-iphone/" class="sf-with-ul">Shop iPhone<span class="sf-sub-indicator"> »</span></a><ul style="visibility: hidden; display: none;">
<li><a href="/accessories-1/" class="sf-with-ul">Accessories<span class="sf-sub-indicator"> »</span></a><ul style="display: none; visibility: hidden;">
<li><a href="/testr/">testr</a></li>

</ul>
</li>

</ul>
</li>
<li class=""><a href="/shop-mac/" class="sf-with-ul">Shop Mac<span class="sf-sub-indicator"> »</span></a><ul style="visibility: hidden; display: none;">
<li><a href="/accessories/">Accessories</a></li>
<li><a href="/notebook-cases/">Notebook Cases</a></li>
<li><a href="/software/">Software</a></li>
<li><a href="/video-devices/">Video Devices</a></li>

</ul>
</li>
<li class=""><a href="/belts/" class="sf-with-ul">Belts<span class="sf-sub-indicator"> »</span></a><ul style="visibility: hidden; display: none;">
<li><a href="/casual-belts/">Casual Belts</a></li>
<li><a href="/jean-belts/">Jean Belts</a></li>
<li><a href="/dress-belts/">Dress Belts</a></li>
<li><a href="/ring-belts/">Ring Belts</a></li>
<li><a href="/uniform-work-belts/">Uniform &amp; Work Belts</a></li>
<li><a href="/name-belts/">Name Belts</a></li>
<li><a href="/tooled-belts/">Tooled Belts</a></li>
<li><a href="/leather-closure-belts/">Leather Closure Belts</a></li>
<li><a href="/santa-belts/">Santa Belts</a></li>
<li><a href="/studded-ornamented/">Studded/Ornamented</a></li>
<li><a href="/stitched-belts/">Stitched Belts</a></li>

</ul>
</li>
<li class=""><a href="/wallets-1/" class="sf-with-ul">Wallets<span class="sf-sub-indicator"> »</span></a><ul...

JavaScript

$(document).ready(function () {
     
     var currentCategory = $(".Breadcrumb ul li:last").text();
     // First, let's get your LIs into an array, so we can test
     // Remember: just because you /can/ string loads of methods 
     // one after the other does not mean you /should/... it 
     // wreaks havoc on testing, and sometimes a method doesn't
     // return what you think it should!
     // You want an array of LI's, so you should concentrate on 
     // selecting those LI's. .has() then allows you to pare down
     // that array to only LI's that contain a tags with the 
     // content you're looking for.
     var arrLI = $(".SideCategoryListFlyout li").has("a:contains('" + currentCategory + "')");
     // Open up the browser console to see the resulting array...
     console.log(arrLI);
     // NOW you can append this clone to your target.
     arrLI.first().clone().appendTo("#test");
     
 });