Javascript 按升序显示和隐藏小部件

我的视图文件中有以下代码：

<?php for ($x = 1; $x <= 5; $x++) {
    echo $this->widget('application.components.FileUploadWidget',array(
    'model'=>$model,
    'attribute'=>'f__10_'.$x,

    'htmlOptions'=>array('class'=>'form-control')
),true);

}

?>


<div class="form-group">
    <div class="col-xs-12 col-sm-2 pull-right" style="">
        <button id="adding" href="#" rel=".copy" class="pull-right add-item btn btn-success" type="button"">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Add</button>
    </div>
</div>
<div class="form-group">
    <div class="col-xs-12 col-sm-2 pull-right" style="">
        <button id="remove" href="#" rel=".copy" class="pull-right add-item btn btn-danger" type="button"">
        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
    </div>
</div>

我有以下JavaScript代码：

<script>
    $(document).ready(function(){
        $("#Form_f__10_1, #Form_f__10_2, #Form_f__10_3, #Form_f__10_4, #Form_f__10_5").hide();

        $("#remove").click(function(){
            $("#Form_f__10_1").hide();
        });
        $("#adding").click(function(){
            $("#Form_f__10_1").show();
        });
    });

</script>

$（文档）.ready（函数（）{
$（“#表格#表格#表格#表格#表格#表格#表格#表格#表格#表格#表格#表格#表格#表格；
$（“#删除”）。单击（函数（）{
$（“#Form_f__10_1”）.hide（）；
});
$（“#添加”）。单击（函数（）{
$（“#Form_f__10_1”）.show（）；
});
});

（JavaScript代码不完整）。当用户按下add按钮时，它应该显示小部件哪个属性等于f_uuu10_1。如果用户再次按下“添加”按钮，它应该会显示小部件哪个属性等于f_uuu10_2。这个过程应该一直进行到小部件的属性等于f_u10_5为止。如何在JavaScript中实现这一点？

您应该使用“堆栈”机制。将显示的小部件数量存储在（全局可访问）计数器中，例如，这是小部件计数器。这就是它的工作原理：

按下“添加->小部件\计数器+”并显示元素

按下“添加->小部件\计数器+”并显示元素

按下“删除->小部件\计数器-”并隐藏元素

等等

---

如果达到5或0，则不要执行任何操作。您可以从计数器变量中获得实际（=最后一个）小部件，并由此建立下一个元素的名称。

那么，您希望代码如何工作呢？将您自己设置为一个变量，其中您将当前表单（

current=“form\f\u 10\u 1”

）作为字符串提供，然后在两个函数中为“#remove”和“#adding”提供用适当的数字替换该字符串的最后一个字符。（我不会说php，所以其他人需要为您编写代码；）