JQuery-单击链接时显示多个选择框

我用JQuery编写了一个小函数，花了我一点时间，但我做到了。单击一个链接，将显示一个下拉列表。但我需要单击链接并显示下拉列表，但再次单击后，我希望再次显示相同的下拉列表，最多4个

现在我有点受不了了，我已经走了这么远了

HTML:

CSS:

有人能指出正确的方向吗。我的JSFIDLE在这里：

谢谢

---

​

我已更新了您发送的小提琴，并说明了我的操作方法：

jQuery

var current = 1;
$(function() {
$("a.toggle").click(function(e) {
    if(current <= 4) {
      $("#moreLocations" + current).show();
    current += 1;
    }
e.preventDefault();
 });
});

var电流=1；
$（函数（）{
$（“a.toggle”）。单击（函数（e）{
如果（当前不是问题：）（感觉很顽皮，因为你不应该在S.O.上做这种事情！）
$(function() {
    $("a.toggle").click(function(e) {
        $(this).next().toggle();
        e.preventDefault();
    });
});​

.toggleDiv { display: none; }
.toggle { font: 14px black Tahoma; }

var current = 1;
$(function() {
$("a.toggle").click(function(e) {
    if(current <= 4) {
      $("#moreLocations" + current).show();
    current += 1;
    }
e.preventDefault();
 });
});

<a class="toggle" href="#">Add another Location</a>
<div id="moreLocations1" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations2" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations3" class="toggleDiv">insert more locations dropdownbox</div>
<div id="moreLocations4" class="toggleDiv">insert more locations dropdownbox</div>