如何在同一页面中两次使用 JQuery 函数？

我不是很擅长编码，但我最终会为我的办公室做一些事情。

我目前正在构建一个手风琴，它携带来自 json 的一些信息。我使用我在互联网上获得的 JQuery 代码来构建它。

问题是我试图在同一个 HTML 页面中调用这个 JQuery 函数两次，用两个不同的 json 数据构建两个不同的手风琴集。

我尝试更改 JQuery，调用一个“accordion.init()”和另一个“accordion2.init()”，有几种不同的变体，但没有成功。

我的 html 非常直接：

<script src="fase2.js"></script>
<div class="container">
<section class="accordion"></section> 
</div>

以及HTML继承的js文件：

jQuery(document).ready(function($){
    var accordion={
        init:function(){
            this.accordionJson='fase2.json';
            this.getData();
        },
        getData:function(){
            $.ajax({
                url:accordion.accordionJson,
                success:function(data){
                    var dataBlock=data.data;
                    accordion.iterateAccordionData(dataBlock);
                    accordion.hideAccordion();
                }
            });
        },
        iterateAccordionData:function(accordionData){
            for(i=0;i<accordionData.length;i++){
                $(".accordion").append("<article>");
            }
            accordion.appendAccordionContent(accordionData);
        },
        appendAccordionContent:function(accordionData){
            $('article').each(function(index){
                $('article').eq(index).append('<h2><img src= "' + accordionData[index]['Logo'] +'">' + accordionData[index]['FriendlyName'] + '<span> #'+  accordionData[index]['index'] + '</span></h2>');
                $('article').eq(index).append('<p><span>Role</span>:<br>' + accordionData[index]['Roles']+ '</p>')
                $('article').eq(index).append('<p><span>APIs:</span><br>'+accordionData[index]['ApiFamilyType']+'</p>');
                $('article').eq(index).append('<p><span>Endpoints:</span><br>'+accordionData[index]['ApiEndpoints']+'</p>');
                $('article').eq(index).append('<p><span>Organisation:</span><br>'+accordionData[index]['OrganisationName']+'</p>');
            });
        },
        hideAccordion:function(){
            $('p').hide();
            accordion.toggleAccordion();
        },
        toggleAccordion:function(){
            $('article').on('click',function(){
                $(this).find('p').slideToggle();
                $(this).toggleClass('active');
            });
        },
    };
    accordion.init();
});

我试图做的是调用第二个js文件，大多数变量的名称不同：

jQuery(document).ready(function($){
var accordion2={
    init:function(){
        this.accordionJson='fase2-n.json';
        this.getData();
    },
    getData:function(){
        $.ajax({
            url:accordion2.accordion2Json,
            success:function(data){
                var dataBlock=data.data;
                accordion2.iterateAccordionData(dataBlock);
                accordion2.hideAccordion();
            }
        });
    },
    iterateAccordionData:function(accordionData2){
        for(i=0;i<accordionData2.length;i++){
            $(".accordion").append("<article>");
        }
        accordion2.appendAccordionContent(accordionData2);
    },
    appendAccordionContent:function(accordionData2){
        $('article').each(function(index){
            $('article').eq(index).append('<h2><img src= "' + accordionData2[index]['Logo'] +'">' + accordionData2[index]['CustomerFriendlyName'] + '<span> #'+  accordionData2[index]['index'] + '</span></h2>');
            $('article').eq(index).append('<p><span>Role ITP</span>:<br>' + accordionData2[index]['Roles']+ '</p>')
            $('article').eq(index).append('<p><span>Família de APIs publicadas:</span><br>'+accordionData2[index]['ApiFamilyType']+'</p>');
            $('article').eq(index).append('<p><span>Endpoints publicados:</span><br>'+accordionData2[index]['ApiEndpoints']+'</p>');
            $('article').eq(index).append('<p><span>Organizações que utilizam está marca:</span><br>'+accordionData2[index]['OrganisationName']+'</p>');
        });
    },
    hideAccordion:function(){
        $('p').hide();
        accordion2.toggleAccordion();
    },
    toggleAccordion:function(){
        $('article').on('click',function(){
            $(this).find('p').slideToggle();
            $(this).toggleClass('active');
        });
    },
};
accordion2.init();
});

但我最终得到一个错误：

未捕获的类型错误：无法在 HTMLElement 处读取未定义的属性（读取“徽标”）。(fase2-n.js:25:88)

这是这一行：

$('article').eq(index).append('<h2>imgsrc="'+accordionData2[index]'Logo']+'">'+accordionData2[index]['CustomerFriendlyName']+'<span>#'+accordionData2[index]['index']+'</span></h2>');

这个错误让我感到困惑，因为如果我打印类似:console.log(accordionData2[0]['Logo']的内容，js 代码将为我的 json 中的徽标给出肯定的结果。

你能帮我理解什么是不正确的吗？

obs：手风琴加载正确，只调用了一个 jQuery。obs2：使用我在此处发布的代码，来自第二个 json 的数据与第一个手风琴一起加载，一个手风琴在另一个之上。我想上面的错误只在第一个json数据结束后出现（第一个json索引小于第二个）