Can't target ID of an element in a loop using jQuery

I'm stumped and need some help. I am trying to implement some responsive code, upon implementation, I had to re-jigger some code to make it work. One being getting the ID from a table element. The HTML I have so far:

<div class="title">blah</div>
<table id="Sailing%20Monohull" class="responsive">
    <!-- contents -->
</table>

When you go responsive, the HTML changes, like so:

<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> 

This is repeated 3 times. When responsive, I want to get the table ID, example "Sailing%20Monohull" I have tried in Chrome's console:

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

and I got the desired results. but when I put it in my file, upload it and run it, I get undefined and I don't know why. I am open to any ideas. Thanks in advance