HTML中的Javascript HTML中的JavaScript

我想在其他标签中嵌套标签，以便启用或禁用聊天机器人的下载按钮.但是，不允许嵌套标记.有没有其他方法来实现这一点？下面是我的完整的HTML文件.

{% extends "layout.html" %}
{% block content %}

<!-- Begin page content -->
  <div class="overflow-auto">
    <br>
    <br>

    <div id="list-group" class="list-group w-auto">
      <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">                                                           
                    <img src="https://digital-practice.ams3.cdn.digitaloceanspaces.com/static%2Fapp%2Fimg%2Fopenai-logo.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> 
                    <div class="d-flex gap-2 w-100 justify-content-between">
                      <div>
                        <p class="mb-0 opacity-75">How may I help you?</p>
                      </div>
                    </div>
      </a>
    </div>
    <div class="input-group mb-3">
      <textarea id="chat-input" class="form-control custom-control" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
      <span id="gpt-button" class="input-group-asson btn btn-primary">Ask ChatGPT</span>

    </div>
  </div>
  

  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

  <script>

    $("#gpt-button").click(function(){
    chat();
    });

    $("#chat-input").keypress(function(event){  
    if(event.which==13){
        chat();
    }
    });


    
    function chat(){
    var question = $("#chat-input").val();
    console.log(true);  
    $("#chat-input").val('');

    let html_data = '';
    html_data += `<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
        <img src="{{ url_for('static', filename='images/ai4eic-logo.png') }}" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
        <div class="d-flex gap-2 w-100 justify-content-between">
          <div>
            <p class="mb-0 opacity-75">${question}</p>
          </div>
        </div>
      </a>`;
    $("#chat-input").val('');
    $("#list-group").append(html_data);

    $.ajax({
        type: "POST",
        url: "/chat",
        data: {'prompt': question},
        success: function (data) {

        let gpt_data = '';
        gpt_data += `
               <script>
               let butt=document.getElementById("download-button");         
               if((data.answer).includes("python")){
                   butt.classList.add("fadeIn");
                   butt.disabled = false;
               }
               </script>

               <style> 
                       p{word-break: break-all;
                         white-space:normal;} 

                       #download-button {
                         transition: opacity 1s;
                         opacity: 0;
                        }

                       #download-button.fadeIn {
                         opacity: 1;
                         }
                </style>       


           <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3">
                    <img src="https://digital-practice.ams3.cdn.digitaloceanspaces.com/static%2Fapp%2Fimg%2Fopenai-logo.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">  
                    <div class="d-flex gap-2 w-100 justify-content-between">
                      <div class="a">                                                           
                        <p class="mb-0 opacity-75">${data.answer}</p>    
                        <button type="button" disabled="true" id="download-button" class="btn btn-primary">Download Code</button>                
                      </div>                                                          
                    </div>                                                            
                  </a>`;
        $("#list-group").append(gpt_data);
        }
    });
    };

    </script>
 

  {% endblock content %}

有问题的代码块包括

<script>
       let butt=document.getElementById("download-button");         
       if((data.answer).includes("python")){
             butt.classList.add("fadeIn");
             butt.disabled = false;
        }
</script>

我try 将该脚本放入一个单独的.js文件中，并从该HTML文件调用该.js文件.然而，这似乎并不起作用，我认为这是因为Java代码调用了私有类属性，如#chat-input等.