title: Pug file not recognizing jQuery
body: <p>I have a simple Pug interface for my Node/Express app that includes a WebChat widget and some tabs that have iFrames in them. I want to use a jQuery snippet to capture a variable and put it into the URLs located inside the tabs' iFrames. For now, I'm just trying to get the Wikipedia URL to work (variable is <em>inputMessage</em>).</p>
  
  <p>The problem is I need the jQuery to be a part of my WebChat widget script in order to capture the user's input from its input box (into a variable), but then the script runs and the footer tabs have not even been created yet, so when the project runs, I get an "undefined" as a URL from Wikipedia, because <code>inputMessage</code> was never placed there correctly. But I can't place a footer before the script either, since the tabbed iFrames need to be lower on the page than the chat widget. I imagine there are many ways to achieve this. I'm new to Pug and scripts, so I'm not aware of a way yet.</p>
  
  <p><strong>index.pug</strong></p>
  
  <pre><code>extends layout
  
  block content
  
    doctype html
    html(lang="en")
      head
        meta(charset='utf-8')
        meta(name='viewport' content='width=device-width, initial-scale=1')
        script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js')
  
      article
        ul
          li.title Study Bot
          li.robot 
            img(src='/images/robot-face.jpg' alt='Robot face')
  
      chat-window
        #webchat(action='/chat', method='POST')
        script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
        script.
          const styleSet = window.WebChat.createStyleSet({
            bubbleBackground: 'rgba(252, 229, 53, 1)',
            bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
            paddingRegular: 10,
            sendBoxHeight: 50,  
            bubbleMinWidth: 400,
            bubbleMaxWidth: 700
          });
          window.WebChat.renderWebChat({
          directLine: window.WebChat.createDirectLine({ secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }),
          styleSet
          }, document.getElementById('webchat'));
  
          // Add on keypress listener to text input and wait for the user to hit the `enter` key
          $("input[aria-label='Type your message']").on('keypress', event =&gt; {
            // Check if user pressed `enter`
            if (event.which === 13){
              var inputMessage = $("input[aria-label='Type your message']").val();
              document.getElementById('#tab-window').innerHTML = inputMessage;
            }
          });
  
      footer
        .tab
          button.tablinks(onclick="openSite(event, 'Encyclopedia')") Encyclopedia
          button.tablinks(onclick="openSite(event, 'MSAcademic')") Microsoft Academic
          button.tablinks(onclick="openSite(event, 'NewsBlogs')") News / Blogs
        #Encyclopedia.tabcontent
          iframe#tab-window(src=`https://en.wikipedia.org/wiki/${inputMessage}`)
        #MSAcademic.tabcontent
          iframe#tab-window(src='https://academic.microsoft.com/')
        #NewsBlogs.tabcontent
          iframe#tab-window(src='https://www.bing.com/')
  
      script
        include ../routes/index.js
  </code></pre>