我如何优化这些可重复的Javascript代码集，只需进行一些更改

我有一套可重复和类似的代码来打开和关闭几个模态。modals最多可以有100个，因为它们将通过cms生成，我已经将其编程为使用ID调用每个具有各自不同内容的modals。这些模态在单击文本或锚链接时打开，在单击背景或关闭按钮时关闭。用于标记文本、锚定链接和情态动词的ID都是相似的，只是它们的后缀是索引号1,2,3…，n

文本1或锚定1将打开模式1。modal-close-1按钮或modal-bg-1将关闭modal-1。 文本2或锚定2将打开模式2。modal-close-2按钮或modal-bg-2将关闭modal-2。 文本1或锚定3将打开模式3。modal-close-3按钮或modal-bg-3将关闭modal-3

在cms生成其他模态时，如何使该代码更优化、更干燥、更高效，以适应这些模态

$（文档）.ready（函数（）{
//单击文本1时，打开modal-1
$（文档）。在（“单击”上，“#company-article-summary-1”，函数（）{
$（#company-article-modal-1”）.addClass（“show”）；
$（“#company-article-modal-close-1”）.addClass（“show”）；
$（#company-article-content-1”）.addClass（“show”）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//单击锚链1时，打开modal-1
$（文档）。在（“单击”上，“#company-article-cta-1”，函数（）{
$（#company-article-modal-1”）.addClass（“show”）；
$（“#company-article-modal-close-1”）.addClass（“show”）；
$（#company-article-content-1”）.addClass（“show”）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//单击文本2时，打开modal-2
$（文档）。在（“单击”上，“#company-article-summary-2”，函数（）{
$（#company-article-modal-2”）.addClass（“show”）；
$（“#company-article-modal-close-2”）.addClass（“show”）；
$（#company-article-content-2”）.addClass（“show”）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//单击锚链2时，打开modal-2
$（文档）。在（“单击”上，“#company-article-cta-2”，函数（）{
$（#company-article-modal-2”）.addClass（“show”）；
$（“#company-article-modal-close-2”）.addClass（“show”）；
$（#company-article-content-2”）.addClass（“show”）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//单击文本3时，打开modal-3
$（文档）。在（“单击”上，“#company-article-summary-3”，函数（）{
$（#company-article-modal-3”）.addClass（“show”）；
$（“#company-article-modal-close-3”）.addClass（“show”）；
$（#company-article-content-3”）.addClass（“show”）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//单击锚链3时，打开modal-3
$（文档）。在（“单击”上，“#company-article-cta-3”，函数（）{
$（#company-article-modal-3”）.addClass（“show”）；
$（“#company-article-modal-close-3”）.addClass（“show”）；
$（#company-article-content-3”）.addClass（“show”）；
$（'body，html'）.css（'overflow'，'hidden'）；
});
//单击模式-1的背景后，关闭模式-1
$（#company-article-modal-1'）。在（'click'，函数（e）上{
如果（例如，目标！==此）
返回；
$（#company-article-modal-1”）.removeClass（“show”）；
$（“#company-article-modal-close-1”）.removeClass（“show”）；
$（#company-article-content-1”）.removeClass（“show”）；
$（'body，html'）.removeAttr（“style”）；
});
//单击模式-1的关闭按钮-1时，关闭模式-1
$（#company-article-modal-close-vector-1'）。on（'click'，function（）{
$（#company-article-modal-1”）.removeClass（“show”）；
$（“#company-article-modal-close-1”）.removeClass（“show”）；
$（#company-article-content-1”）.removeClass（“show”）；
$（'body，html'）.removeAttr（“style”）；
});
//单击模式2的背景后，关闭模式2
$（#company-article-modal-2'）。在（'click'，函数（e）上{
如果（例如，目标！==此）
返回；
$（#company-article-modal-2”）.removeClass（“show”）；
$（“#company-article-modal-close-2”）.removeClass（“show”）；
$（#company-article-content-2”）.removeClass（“show”）；
$（'body，html'）.removeAttr（“style”）；
});
//单击模式2的关闭按钮2时，关闭模式2
$（#company-article-modal-close-vector-2'）。on（'click'，function（）{
$（#company-article-modal-2”）.removeClass（“show”）；
$（“#company-article-modal-close-2”）.removeClass（“show”）；
$（#company-article-content-2”）.removeClass（“show”）；
$（'body，html'）.removeAttr（“style”）；
});
//单击模式3的背景后，关闭模式3
$（#company-article-modal-3'）。在（'click'，函数（e）上{
如果（例如，目标！==此）
返回；
$（#company-article-modal-3”）.removeClass（“show”）；
$（“#company-article-modal-close-3”）.removeClass（“show”）；
$（#company-article-content-3”）.removeClass（“show”）；
$（'body，html'）.removeAttr（“style”）；
});
//单击模式-3的关闭按钮-3时，关闭模式-3
$（#company-article-modal-close-vector-3'）。on（'click'，function（）{
$（#company-article-modal-3”）.removeClass（“show”）；
$（“#company-article-modal-close-3”）.removeClass（“show”）；
$（#company-article-content-3”）.removeClass（“show”）；
$（'body，html'）.removeAttr（“style”）；
});
})

。公司端模式{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.8）；
过渡：全部。5s轻松进出；
不透明度：0；
z指数：-9999；
指针事件：无；
}
.公司方{
z指数：999999；
不透明度：1；
过渡：全部。5秒放松；
指针事件：自动；
}
.公司侧模式关闭{
填充：#fff；
}
.公司侧集装箱{
位置：绝对位置；
顶部：60px；
左：50%；
光标：指针；
不透明度：0；
转换：转换（-69px，0）；
}
.company-side-modal-close-container.show{
转换延迟：.07s；
不透明度：1；
}
.公司方模式背景{
位置：绝对位置；
右：0；
排名：0；
宽度：50%；
左边距：自动；
转换：翻译（10）
$(document).ready(function () {
  function showContent(selector) {
    $(selector).addClass("show");
    $("body,html").css("overflow", "hidden");
  }

  function hideContent(selector) {
    $(selector).removeClass("show");
    $("body,html").css("overflow", "");
  }

  $(document).on("click", "#company-article-summary-1,#company-article-cta-1", function () {
    showContent("#company-article-modal-1,#company-article-modal-close-1,#company-article-content-1");
  });

  $(document).on("click", "#company-article-modal-1,#company-article-modal-close-vector-1", function () {
    hideContent("#company-article-modal-1,#company-article-modal-close-1,#company-article-content-1");
  });
});

  // repeat for 2, 3

$(document).on("click", ".article-summary,.article-content", function () {

showContent($(this).closest(".row").find(".modal,.modal-close,.article"));

let arr = [1,2,3];
let ids = ["#company-article-summary-", "#company-article-summary-", "#company-article-cta-"];

arr.forEach((element, index) => {
    ids.forEach(e => {
        $(document).on("click", e + index, function() {
            $("#company-article-modal-" + index).addClass("show");
            $("#company-article-modal-close-" + index).addClass("show");
            $("#company-article-content-" + index).addClass("show");
            $('body,html').css('overflow', 'hidden');
          });

        $('#company-article-modal-' + index).on('click', function(e) {
            if (e.target !== this)
              return;
            $("#company-article-modal-" + index).removeClass("show");
            $("#company-article-modal-close-" + index).removeClass("show");
            $("#company-article-content-" + index).removeClass("show");
            $('body,html').removeAttr("style");
          });
        
          $('#company-article-modal-close-vector-' + index).on('click', function() {
            $("#company-article-modal-" + index).removeClass("show");
            $("#company-article-modal-close-" + index).removeClass("show");
            $("#company-article-content-" + index).removeClass("show");
            $('body,html').removeAttr("style");
          });

    })
})