How to increment data-target value in PHP

Question

Hi, I'm trying to create a 3 tab block for my WordPress site. When the user clicks tab 1, they get the contents of tab 1, when the user clicks tab 2, they get the contents of tab 2, and so on. My problem is that I don't know how to increase the data target value. Since it has a target value of "tab-1" for all three tabs, it won't correspond to CSS. Other content will not be hidden. Also, I don't want my activity class to be looped as well, I just want the yellow activity css class to appear on the first tab. Thank you

//=====Tab Row CSS=======
.nav-tabs li::before {
    content: ''!important;
}
.nav-tabs {
/* display: flex; */
/* padding: 0 100px 0; */
/* background-color: #2f1400; */
    border-bottom: 2px solid $color-text;
margin-bottom: 1rem;
}
@media (min-width: 576px) {
    .nav-tabs .nav-item {
        max-width: 233px;
    }
    .nav-tabs {
            flex-wrap: nowrap;
    }
}
.nav-tabs li a.active,
.nav-tabs li:hover a{
    background-color: $color-gold !important;
    color: $color-text !important;
}
.nav-tabs li a{
    background-color: #fff;
    border: 1px solid $color-text !important;
/* border-radius: 0 !important; */
    color: $color-text;
    display: inline-block;
    padding: 5px 15px;
    margin-right: -1px;
    font-size: 1rem;
    font-weight: 700;
}
.nav-content {
    max-width: 1200px;
    display: block;
    margin: 0 auto;
}
@media (max-width: 575px) {
    .nav-tabs li a{
    border-radius: 0 !important;
        width: 100%;
        padding: 1rem;
    }
    .nav-tabs li {
        width: 100%;
    }
    
}

<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
    $tabs = get_field('tab' );
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $headline = $tab['headline'];
        ?>
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" data-target="#tab-1"
    type="button" role="tab" aria-controls="home" aria-selected="true"><?php echo $headline; ?></a>
  </li>
  <?php endforeach; ?>
    <?php endif; ?>
</ul>
<div class="tab-content page" id="myTabContent">
<?php
    $tabs = get_field('tab' );
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $description = $tab['description'];
        ?>
  <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1">
  <p><?php echo $description; ?></p>
  </div>
  <?php endforeach; ?>
    <?php endif; ?>
  

 
</div>

Answer 1

Create a variable with the number you want to start with, e.g. 1, and then use PHP's post-increment $a Increment as you loop through the next tab or content its value.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <?php
    $tabIndex = 1;
    $tabs = get_field('tab');
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $headline = $tab['headline'];
        ?>
    <li class="nav-item" role="presentation">
      <a class="nav-link<?php if ($tabIndex === 1) { echo ' active'; } ?>" id="home-tab" data-toggle="tab" data-target="#tab-<?php echo $tabIndex; ?>" type="button" role="tab" aria-controls="home" aria-selected="true">
        <?php echo $headline; ?>
      </a>
    </li>
    <?php $tabIndex++; ?>
    <?php endforeach; ?>
    <?php endif; ?>
</ul>
<div class="tab-content page" id="myTabContent">
  <?php
    $tabIndex = 1;
    $tabs = get_field('tab');
    if( $tabs ) :
        foreach( $tabs as $tab) :
        $description = $tab['description'];
        ?>
    <div class="tab-pane fade show<?php if ($tabIndex === 1) { echo ' active'; } ?>" id="tab-<?php echo $tabIndex; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $tabIndex; ?>">
      <p>
        <?php echo $description; ?>
      </p>
    </div>
    <?php $tabIndex++; ?>
    <?php endforeach; ?>
    <?php endif; ?>
</div>