javascript循环需要一次单击一个来显示隐藏列表

我有一个隐藏的div列表，并希望能够显示一次一个div，当一个按钮按下。。我很难为此编写正确的循环

product_options: function() {
        var product_option = $('.product_product_options_option_name')
        $(product_option).css("display", "none");
        $('.add_product_option').on('click', function (e) {
             e.preventDefault();  
             $(product_option).each(function(){
                 $(this).css("display", "block")
             });
        });
    }

目前，它会在单击时显示所有循环，我删除了所有其他循环尝试，因为它们错误得惊人，或者做得不多

产品选项：函数（）{
var product_option=$（'.product_product_option_option_option_name'）
$（产品选项）.css（“显示”、“无”）；
$（'.add_product_option'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（product_option+'：hidden'）.eq（0.show（）；
});
}

试试看

演示：

$（函数（）{
var options=$（'.product_option'）.hide（）；
$（'.add'）。单击（函数（）{
如果（选项.长度）{
options.first（）.show（）；
options=options.slice（1）；
}
});
})

选择1
选择2
选择3
选择4
备选案文5
备选案文6
添加产品选项

尝试以下操作：

$（'.product\u product\u options\u option\u name'）.hide（）；
var计数=0；
$（'.add_product_option'）。在（'click'，function（）上{
$（'.product_product_options_option_name:eq（'+count+'））.show（）；
计数++；
});

1div
2div
3div
4div
应该是$（this）.show（）当你一次说一个时，你的意思是单击“添加产品”选项将显示一个div，还是一个div将显示一个延迟，然后会显示另一个div？您应该使用jQuery将您的div附加到一个容器中。我的意思是，单击div即可显示感谢您的澄清。我需要一个类似的功能，但我当时只希望显示一个内容。因此，如果我单击“添加产品”，则会显示选项2，但不会显示选项1；如果我再次单击，则会显示选项3，而不会显示此选项前面的两个选项。@Cyzanfar您只需维护当前选项即可
product_option.first().show(); //show only the first one
product_option = product_option.slice(1); //remove the first one