JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title">blah</div>
<div class="table-wrapper">
    <div class="scrollable">
        <table id="Sailing%20Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
    <div class="pinned">
        <table id="Sailing%20Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
</div> 
<div class="title">blah</div>
<div class="table-wrapper">
    <div class="scrollable">
        <table id="Sailing%40Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
    <div class="pinned">
        <table id="Sailing%20Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
</div> 
<div class="title">blah</div>
<div class="table-wrapper">
    <div class="scrollable">
        <table id="Sailing%60Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
    <div class="pinned">
        <table id="Sailing%20Monohull" class="responsive">
            <!-- contents -->
        </table>
    </div>
</div>

JavaScript

$(".title").each(function(index, element) {
    console.log($(this).next("div").find('.scrollable').find("table").attr("id"));
   
});