Javascript 多个jQuery协议相互干扰

我已经创造了一些水平滑动手风琴，我希望使用。如果我只有一个手风琴，那么它工作得很好，但是如果我加上第二个手风琴，它们就会互相干扰

e、 g.单击第一个手风琴上的一个选项卡将在第二个手风琴上打开一个选项卡

function add() {

    j++;
        //Create an input type dynamically.
        var element = document.createElement("input");
        var element2 = document.createElement("br");

        //Assign different attributes to the element.
        element.setAttribute("type", "text");
        element.setAttribute("id", j);
        element.setAttribute("class", "form-control");
        element.setAttribute("name", j);
        element.setAttribute("onblur", "addPreferedLocation()");
        element.setAttribute("placeholder", " Preference"+" "+j);


        var foo = document.getElementById("fooBar");

        //Append the element in page (in span).
        foo.appendChild(element);
        foo.appendChild(element2);



}

我需要他们以某种方式彼此独立

这里是我的js的一个片段，如果您愿意看一下的话，其余的都在JSFIDLE中

var totalTabWidth = 0;
function accord(){
$("*[accordionHeditor='true']").not('[rendered]').each(function(){
    activePanel = $(this).find("div.accPanel:first");

        $(this).find(".accPanel").each(function(){
          totalTabWidth += parseInt($(this).find(".blue").css("width").replace("px", ""));
        });

        $(activePanel).animate({width: (parseInt($(activePanel).parent().css("width").replace("px")) - totalTabWidth).toString() + "px"}, 300);
        $(activePanel).parent().find('.accPanel').removeClass('active');
        $(activePanel).addClass('active');

        $(this).on('click', '.accPanel', function(e){
            if( ! $(this).is('.active') ){
            $(activePanel).animate({width: "44px"}, 300);
            $(this).animate({width: (parseInt($(this).parent().css("width").replace("px")) - totalTabWidth).toString() + "px"}, 300);
            $(this).parent().find('.accPanel').removeClass('active');
            $(this).addClass('active');
            activePanel = this;
           };
         });

      $(this).attr("rendered", "1");
 });
}

accord();

下面是一个示例，其中包含我的所有代码：

https://jsfiddle.net/rsmith93/fhwmea8c/

---

非常感谢您提供的任何帮助。

您需要通过id唯一地标识手风琴。请尝试为这两个手风琴编写单独的单击事件

下面是一个动态添加文本框并设置唯一属性的示例（我以前在项目中使用过）。 你的手风琴也可以这样

function add() {

    j++;
        //Create an input type dynamically.
        var element = document.createElement("input");
        var element2 = document.createElement("br");

        //Assign different attributes to the element.
        element.setAttribute("type", "text");
        element.setAttribute("id", j);
        element.setAttribute("class", "form-control");
        element.setAttribute("name", j);
        element.setAttribute("onblur", "addPreferedLocation()");
        element.setAttribute("placeholder", " Preference"+" "+j);


        var foo = document.getElementById("fooBar");

        //Append the element in page (in span).
        foo.appendChild(element);
        foo.appendChild(element2);



}

---

对于我试图实现的，用户实际上会将这些手风琴添加到一个页面中，并且可以添加任意数量的手风琴，因此我无法为每个手风琴硬编码onclick事件。谢谢。在这种情况下，您可以通过自动递增数值变量并将其作为id分配给accordion来生成id。然后您可以从单击事件中获取id。谢谢，您能否提供一个简单的示例来说明如何进行此操作？