title: How to display number input using button for calculator in HTML?
body: <p>When I click numbers, I always get the same result. Why? Here is my HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;body&gt;
        &lt;p id="demo"&gt;&lt;/p&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="1"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="2"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="3"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="4"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="5"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="6"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="7"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="8"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="9"&gt;
        &lt;input type="button" id="myBtn" onclick="myFunction()" value="0"&gt;
        &lt;script&gt;
           function myFunction() {
               var x = document.getElementById("myBtn").value;
               document.getElementById("demo").innerHTML = x;
           }
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>