Google Apps Script + JQuery开发WebApp时表单重复生成与按钮功能异常问题求助

我最近在用Google Apps Script搭配JQuery做一个小型WebApp，结果碰到个头疼的问题——表单会自动重复生成，现在卡壳了，想请大伙帮忙看看问题出在哪。

我的App由以下4个文件组成：

Code.gs #

function doGet(request) 
{
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function include(filename) 
{
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Index.html #

<!DOCTYPE html>
<html>
  
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.js" type="text/javascript"></script>
  </head>
  
  <?!= include('Javascript'); ?>

  <body>
    <div>
      <button type="button" class="BTN_new">Show</button>
      <button type="button" class="BTN_hide">Hide</button>
    </div>
    <div class="section Screen DataScreen"></div>    
    <?!= include('Templates'); ?>
  </body>

</html>

Javascript.html #

<script>  
  $(document).ready(function($)
  {  
    $('.Screen').hide();
 
    $(document).on('click', '.BTN_new', function(event) {
      var GetTemplateData = $('.New_Project').html();
      $('.DataScreen').html(GetTemplateData);
      $('.DataScreen').show();
    });

    $(document).on('click', '.BTN_hide', function(event) {
      $('.Screen').hide();});
    });
</script>

Templates.html #

<div class="Screen New_Project" style="display:none;">
    <div id="home">
      <script> 
        var elements = ["room1", "room2"];
        var c_room1 = 0;
        var c_room2 = 0;

        for (var i = 0; i < elements.length; i++) {
          document.getElementById("home").innerHTML += '<div>'+ elements[i] +'</div><div><div id='+ elements[i] +'><button type="button" id="'+ elements[i] +'_minus">-</button><span class='+ elements[i] +' disabled></span><button type="button" id="'+ elements[i] +'_plus">+</button></div></div>';
        }
      
        $('#room1_plus').click(function(){ c_room1++; $('.room1').html(c_room1);});
        $('#room1_minus').click(function(){ c_room1--; $('.room1').html(c_room1);});
        $('#room2_plus').click(function(){ c_room2++; $('.room2').html(c_room2);});
        $('#room2_minus').click(function(){ c_room2--; $('.room2').html(c_room2);});
      </script>
</div>

遇到的问题 #

我的需求是通过加减按钮调整每个房间的计数，但现在出现两个异常：

1. 列表重复生成：页面上的房间列表会重复显示，比如我定义2个房间，页面就会生成2组完全一样的条目；定义3个房间，就生成3组，以此类推。
2. 按钮功能异常：只有第一组的加减按钮能触发操作，但点击第一组room1的按钮时，所有room1的数值都会跟着变化；而后面几组的按钮完全没有反应。

我已经尝试过的解决方法 #

• 把所有代码合并到同一个文件里，问题没有任何改善
• 将elements变量从var改成const，这时候列表不会重复生成了，但所有加减按钮都彻底失效，点击毫无反应
• 打开浏览器开发者工具查看元素，发现生成的条目数量和elements数组的长度完全一致：数组有n个元素，页面就生成n组条目

我感觉问题大概率出在循环逻辑里，但自己琢磨了好久都没找到关键点，希望有经验的大佬能帮忙分析一下，谢谢大家！

备注：内容来源于stack exchange，提问作者Maxence Hermand