title: Why is jQuery .val() returning nothing?
body: <p>I am trying to get the value of an input. Here is what my form looks like:</p>
  <p><a href="https://i.stack.imgur.com/I4NqT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I4NqT.png" alt="enter image description here" /></a></p>
  <p>This is the HTML for it:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;label for=&quot;userName&quot;&gt;&lt;/label&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-input plain-text&quot; id=&quot;userName&quot; placeholder=&quot;Username&quot;&gt;
  </code></pre>
  <p>Here is the jQuery to get its value and log it:</p>
  <pre class="lang-js prettyprint-override"><code>$(&quot;#loginSubmit&quot;).click(function() {
      var userName = $(&quot;#userName&quot;).val();
      console.log(userName);
  });
  </code></pre>
  <p>But when I type in some text and hit the login button that has the id <code>#userName</code>, the console returns this:</p>
  <p><a href="https://i.stack.imgur.com/UNBHW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UNBHW.png" alt="enter image description here" /></a></p>
  <p>Why does this not output <code>dwedwed</code> in the console?</p>
  <p>Thanks</p>
  <hr />
  <p>Solution found in comments</p>
  <p>Debugging: I found I have more than one input with the same ID</p>