Php 增加元素的数量'；每次循环运行时，s id和href

HTML/PHP

<div id="procedimentos" class="wrapper section">
<div class="container procedimentos row flex-column-reverse flex-md-row">

    <!-- thumbnails -->
    <div class="col-md-5 grid-col main-text text-center pl-md-0">
        <li>
            <a href="#img-1" class="proced-btn">
                <i>Icon goes here</i>
                <p>Text goes here</p>
            </a>
        </li>
        <li>
            <a href="#img-2" class="proced-btn">
                <i>Icon goes here</i>
                <p>Text goes here</p>
            </a>
        </li>
        <li>
            <a href="#img-3" class="proced-btn">
                <i>Icon goes here</i>
                <p>Text goes here</p>
            </a>
        </li>
        
    </div>

    <!-- content -->
    <div class="col-md-7 main-text data-content">
        <?php

        $procedimentos = new WP_Query(array(
            'post_type' => 'procedimento',
            'posts_per_page' => 1
        ));

        while($procedimentos->have_posts()){
            $procedimentos->the_post(); 
        ?>
        <div id="img-1" class="tabcontent pl-md-3 active">
            <div class="blog-content">
                <div class="main-text">
                    <p><?php the_content(); ?></p>
                </div>
            </div>
        </div> 
        <?php } ?>
    </div>
</div>
</div>

在我的WordPress网站上有这样一种带缩略图的旋转木马，旋转木马的每张幻灯片都应该是一篇文章（因此，一旦单击缩略图，文章就会显示在右栏中）。它没有PHP也可以正常工作，但是由于id和href编号（#img-1、#img-2等）是它正常工作所必需的，因此每次运行while循环时，我都需要找到生成该编号的方法

我尝试用“$I=0；”来包装循环和“$i++；”并在id（id=“img-”（基于的答案）中回显结果，但问题是我还需要在.proced btn内的href中生成相同的编号，该编号在循环之外。我如何实现这一点

---

我是一名PHP初学者，并试图尽可能地解释我的问题，因此，如果有些问题听起来令人困惑，请原谅。

您还需要使用相同的循环生成“继续”按钮。

$(document).ready(function(){
$('.proced-btn').click(function(e){
    
    let href = e.target.getAttribute('href');
    
    $('.tabcontent').each(function(index, element){ 
        if('#${element.id}' != href){ 
            $(element).removeClass('active')
        }
    });
    
    $(href).toggleClass('active') 
    
    e.preventDefault(); 
});
});