jQuery code should fire after on.change()

I’m having trouble with a jQuery function, I created a Fiddle for it:

–> Fiddle <–

So far the function did what it should do which is showing or hiding content based on simple checkbox values. Now what it also does is removing a pre-existing class from the hidden content so that only the visible elements will still have that class. It gets added back to the hidden elements once they are visible again.

The purpose: I want to address the newly created last child of that class in its container. Let’s say these are the elements before:

<div class="container">
    <div class="location-wrap location-show"></div>
    <div class="location-wrap location-show"></div>
    <div class="location-wrap location-show"></div>
    <div class="location-wrap location-show"></div> <!-- the original .container .location-show:last-child -->
</div>

And these are the elements after the on.change() –> some are hidden and the class .location-show is taken from them while it was added to those who show:

<div class="container">
    <div class="location-wrap" style="display: none;"></div>
    <div class="location-wrap" style="display: none;"></div>
    <div class="location-wrap location-show"></div> <!-- this should be the new .container .location-show:last-child -->
    <div class="location-wrap" style="display: none;"></div>
</div>

So my question is: How can I fire code that runs AFTER the on.change and addresses the newly created last child “.location-show” of its container “.container”? No matter what I tried, it will always go straight for the last child that was there right from the beginning.

There is also some other code I would like to run when the dynamically created content is rendered which would also require a check for the new code how it’s presented after on.change() is done. How can I achieve that?