Changing PHP code – will this work?

It seems to work fine. I am not sure about the bolded part. Do I need it twice or just once since its part of the same <>php or do I need it twice since I have two different ID class.

<?php
/**
 * Header top.
 *
 * @package          Flatsome\Templates
 * @flatsome-version 3.16.0
 */

if(flatsome_has_top_bar()['large_or_mobile']){ ?>
<div id="top-bar" class="header-top <?php header_inner_class('top'); ?>">
    <div class="flex-row container">
      <div class="flex-col hide-for-medium flex-left">
          <ul class="nav nav-left medium-nav-center nav-small <?php flatsome_nav_classes('top'); ?>">
              <?php flatsome_header_elements('topbar_elements_left'); ?>
          </ul>
      </div>

		  <div class="flex-col hide-for-medium flex-center">
			  <ul class="nav nav-center nav-small <?php flatsome_nav_classes('top'); ?>">
				  <?php flatsome_header_elements('topbar_elements_center'); ?>
			  </ul>
		  </div>
		
			  <div class="flex-col hide-for-medium flex-right">
				 <ul class="nav top-bar-nav nav-right nav-small <?php flatsome_nav_classes('top'); ?>">

				  </ul>
			  </div>		

				  <?php if(get_theme_mod('header_mobile_elements_top')) { ?>
				  <div class="flex-col show-for-medium flex-grow">
					  <ul class="nav nav-center nav-small mobile-nav <?php flatsome_nav_classes('top'); ?>">
						  <?php flatsome_header_elements('header_mobile_elements_top'); ?>
					  </ul>
				  </div>
				  <?php } ?>
    </div>
</div>


<div id="top-bar1" class="header-top <?php header_inner_class('top'); ?>">
    <div class="flex-row container">
      <div class="flex-col hide-for-medium flex-right">
         <ul class="nav top-bar-nav nav-right nav-small <?php flatsome_nav_classes('top'); ?>">
             <?php flatsome_header_elements('topbar_elements_right'); ?>
          </ul>
      </div>
		
<?php
/**
 * Header top.
 *
 * @package          Flatsome\Templates
 * @flatsome-version 3.16.0
 */

if(flatsome_has_top_bar()['large_or_mobile']){ ?>
<div id="top-bar" class="header-top <?php header_inner_class('top'); ?>">
    <div class="flex-row container">
      <div class="flex-col hide-for-medium flex-left">
          <ul class="nav nav-left medium-nav-center nav-small <?php flatsome_nav_classes('top'); ?>">
              <?php flatsome_header_elements('topbar_elements_left'); ?>
          </ul>
      </div>

		<div class="flex-col hide-for-medium flex-center">
			<ul class="nav nav-center nav-small <?php flatsome_nav_classes('top'); ?>">
				<?php flatsome_header_elements('topbar_elements_center'); ?>
			</ul>
		</div>
		
		<div class="flex-col hide-for-medium flex-right">
			<ul class="nav top-bar-nav nav-right nav-small <?php flatsome_nav_classes('top'); ?>">
			</ul>
		</div>		

		<?php if(get_theme_mod('header_mobile_elements_top')) { ?>
			<div class="flex-col show-for-medium flex-grow">
				<ul class="nav nav-center nav-small mobile-nav <?php flatsome_nav_classes('top'); ?>">
					<?php flatsome_header_elements('header_mobile_elements_top'); ?>
				</ul>
			</div>
		<?php } ?>
    </div>
</div>


<div id="top-bar1" class="header-top <?php header_inner_class('top'); ?>">
    <div class="flex-row container">
      <div class="flex-col hide-for-medium flex-right">
         <ul class="nav top-bar-nav nav-right nav-small <?php flatsome_nav_classes('top'); ?>">
             <?php flatsome_header_elements('topbar_elements_right'); ?>
          </ul>
      </div>	
			<?php if(get_theme_mod('header_mobile_elements_top')) { ?>
				<div class="flex-col show-for-medium flex-grow">
					<ul class="nav nav-center nav-small mobile-nav <?php flatsome_nav_classes('top'); ?>">
						<?php flatsome_header_elements('header_mobile_elements_top'); ?>
					</ul>
				</div>
			<?php } ?>		
    </div>
</div>

<?php } ?>

header-top.php (template-parts/header/header-top.php)

I call this twice, do I need to? If not the last one? Thx

if(flatsome_has_top_bar()['large_or_mobile']){ ?> <div id="top-bar" class="header-top <?php header_inner_class('top'); ?>">