PHP: Getting nested div containers in the html page

My PHP code is designed to display content on an HTML page. The functionality involves iterating through an array of objects using a foreach loop. For each unique ID in the array, a new class is dynamically generated. The intention is to display the corresponding div container when a specific ID is selected from a dropdown menu.

However, there’s an issue: instead of obtaining separate div containers for each ID, I’m experiencing nested div containers. This problem is affecting the functionality of my code to display the selected ID. Below are snippets of my code

Code Snippet

<?php
    // chart loader required for signal history graphs
    set_html_head('<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>');
    add_css('sites/all/themes/clean/pages/stylesheets/diagnostics.css');
    add_js('sites/all/themes/clean/pages/js/helpers.js');
    add_js('sites/all/themes/clean/pages/js/speed-test-results.js');
    $data = $vars['data'];
    $mf_models = unserialize(models);
?>

<div id="diagnostics-wrap">
    <div id="cs-cd-header">
        <h2>Support Page</h2>
        <h3>User ID: <?php print $vars['user_id'] ?></h3>
        <div></div>
        <a href="/admin/service/<?php print $vars['user_id'] ?>">(Service Record)</a> <a href="/admin/service/resend_email/<?php print $vars['user_id'] ?>">(Resend Email)</a>
        <select id="location-selector" onchange="change(this)">
            <option value="all-locations" selected="selected">All Locations</option>

        <?php foreach ($vars['service_locations'] as $key => $sid):?>

            <option value="<?php
                    print $key; ?>">
                <?php
                print $sid['street1']; ;?>
            </option>
        <?php endforeach; ?>
        </select>
    </div>

<?php if ($data === FALSE): ?>
    <h1>Unable to connect</h1>
<?php elseif ($data): ?>
<?php
foreach ($data->data as $cam): ?>
    <?php
        $everything = json_decode(get_everything($cam->uuid));
        $is_shield = $cam->model === 'TEST123';
        $dataVar = stringer($cam->name_id) . rand(1, 999999999);
        include('sites/all/themes/clean/pages/diagnostics-signal-chart-builder.php');
        // js to be ran for battery signal
        if ($everything->model == array_search('search', $mf_models)) {
          include('sites/all/themes/clean/pages/diagnostics-battery-chart-builder.php');
        }
    ?>

    <div class="each-data <?php print $cam->sid;?>">
        <div class="header-wrapper">
            <h3><?php print ucfirst($cam->settings->name) .  '<span> uuid: ' . substr($cam->uuid, -7, 7) . '</span>'; ?></h3>
          <br>
          <span>Model: <?php print $model_name; ?></span>
         </div>

        <br />
       
      <?php if ($is_shield) :?>
        <div class="speed-data-history-wrapper info" style="width: 48%; margin: auto;">
            <h2 class="settings-header">Speed Test History</h2>
            <div class="signal-chart"
                 id="<?php print $cam->uuid . '-speed-graph'; ?>"
            >
            </div>
        </div>
      <?php endif; ?>
        <?php if($is_shield): ?>
        <div>
            <div class="battery-history-wrapper info" style="width: 48%; margin: auto;">
                <h2 class="settings-header">Battery History</h2>
                <div class="signal-chart"
                     id="<?php print ($dataVar . '-battery-graph'); ?>"
                >
                  <?php if (count($battery) < 1): ?>
                      <span class="unknown">Unavailable</span>
                  <?php endif; ?>
                </div>
        </div>
        <br/>
        <div>
            <span style="color:red"><?php print $error_message; ?></span>
        </div>
        <?php endif; ?>


        <?php
          $has_perm = array_intersect(array('developer'), $GLOBALS['user']->roles);
          if ($everything->model == array_search('search', $mf_models)) :
        ?>
        <br/>
        <div class="battery-history-wrapper info" style="width: 48%; margin: auto;">
            <h2 class="settings-header">Battery History</h2>
            <div class="signal-chart"
                 id="<?php print ($dataVar . '-battery-graph'); ?>"
            >
              <?php if (count($battery) < 1): ?>
                <span class="unknown">Unavailable</span>
              <?php endif; ?>
            </div>
        </div>
            <?php if ($has_perm) : ?>
            <div>
                <button class="button" value="<?php print $cam->uuid; ?>" onclick="addTrial('<?php print $cam->uuid; ?>',<?php print $vars['user_id'] ?>,<?php print $cam->sid;?>)">Add Free Trial</button>
            </div>
          <?php endif; ?>

        <?php endif; ?>

        <div class="clear"></div>
        <hr>
    </div>

<?php endforeach; ?>
<?php else: ?>
    <h1>No data</h1>
<?php
    endif;
?>


</div>

Change function

function change(obj) {
    var value = $(obj).val();
    if ( value == 'all-locations') {
        $('.each-data').show();
    } else {
        $('.each-data').hide();
        $('.' + value).show();
    }
}

At which place the issue is coming and what can I do here to resolve this?

I tried to check all the div tags if it is properly closed. Then I checked the change function if it is creating any issue in displaying.