Javascript 具有不同内容的Json数据呈现onclick

我无法将按钮连接到JSON结构。我希望每个按钮渲染每个域。我试着选择

$（'button'）

并应用onlclick（）函数，但没有成功。 是因为我使用JSON呈现了4个按钮，而不是为每个按钮创建HTML结构吗

//登录域信息/设计和结构
const domainInfo=[{
id:001，
域名：“标题1”，
照片：“title-1.jpg”，
},
{
id:002，
域名：“标题2”，
照片：“title-2.jpg”，
},
{
id:003，
域名：“标题3”，
照片：“title-3.jpg”，
},
{
id:004，
域名：“标题4”，
照片：“title-4.jpg”，
},
]
功能域模板（domaininfo）{
返回`
${domaininfo.domain}
`
}
document.getElementById（“domainCat”）.innerHTML=`
${domainInfo.map（domainTemplate.join（“”）}
`
//服务类别数据
常量服务数据=[{
域1数据：[{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：空
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
]
},
//域2数据
{
域2数据：[{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：空
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
]
},
//域3数据
{
域3数据：[{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：空
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
]
},
//域4数据
{
域4数据：[{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：空
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
{
“经理”：“经理姓名”，
“子类别”：“子类别名称”，
“徽标”：{
“prefpart”：“logo-1”，
“第二部分”：“logo-2”，
“locpart”：“logo-3”
}
},
]
}
]
函数servTemplate（servicedata）{
返回`
${servicedata.subcat}
第一节
第二节
第三节
`
}
document.getElementById（“serviceCat”）.innerHTML=`
${serviceData.map（servTemplate.join（“”）}
`

/*域名和图片css*/
#域猫{
宽度：100%；
}
.box\u阴影{
宽度：自动；
高度：自动；
边缘顶部：1米；
显示器：flex；
证明内容：中心；
对齐项目：居中；
浮动：左；
}
.myBtn{
边框：0px实心#000000；
大纲：无；
盒影：无；
宽度：260px；
高度：自动；
背景：无；
利润率：1米1.1米5米1.1米；
填充：0em-1em 5em-1em；
浮动：左；
}
.myBtn:悬停{
大纲：无；
背景：无；
盒影：无；
光标：指针；
}
.cover-bkg-ser-domain4{
背景色：#2BD5F2；
保证金：自动-2em自动；
宽度：90%；
}
.cover-bkg-ser-domain4：悬停{
背景色：rgba（1652092380.8）；
}
/*列表r
function domainTemplate(domaininfo, index) {
  $(document).on('click',`.btn-${index}`, function() {
  document.getElementById("serviceCat").innerHTML = servTemplate(serviceData[index]);

  return `
    ...some html here
    <button id="myBtn" class="myBtn btn-${index}" type="button">
  `;
});

function servTemplate(data) {
  const servicedata = data[Object.keys(data)[0]][0];

  return some html;
}