Jquery tabs elements with same id

[admin]

I am working with wordpress and jquery tabs and was wondering if somebody can help me. My example is similar to this one <a href="https://jqueryui.com/tabs/" rel="nofollow">jQuery UI Tabs</a>

Here is my php code

<?php if (!defined('FW')) die( 'Forbidden' ); ?>
<?php $tabs_id = uniqid('fw-image-tabs-'); ?>
    <div class="fw-image-tabs-container" id="<?php echo esc_attr($tabs_id); ?>">
        <div class="fw-image-tabs">
            <?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
                <div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
                    <h3 class="fw-image-tabs-content"><?php echo $tab['tab_image_title']; ?></h3>
                    <img src="<?php echo esc_attr( $tab['tab_image']['url']); ?>">
                </div>
            <?php endforeach; ?>

            <ul>
                <?php foreach ($atts['image_tabs'] as $key => $tab) : ?>
                    <li><a href="#<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>"><?php echo $tab['tab_title']; ?></a></li>
                <?php endforeach; ?>
            </ul>

            <?php foreach ( $atts['image_tabs'] as $key => $tab ) : ?>
                <div class="fw-image-tabs-content" id="<?php echo esc_attr($tabs_id . '-' . ($key + 1)); ?>">
                    <p><?php echo do_shortcode( $tab['tab_content'] ) ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    </div>

And my script

jQuery(document).ready(function ($) {
    $('.fw-image-tabs-container').tabs();
});

The trouble i am having is that i cannot hide the second

<div class="fw-image-tabs-content"></div>

. Both divs have the same class name and the same id. For some reason only the first id works. How can i show/hide the text for both divs?

Thanks