Hide buttons that make sum over number

Question

I have 10 buttons, and would like to make some disappear if they sum over 10. For example, clicking button 5 would make buttons 6-10 disappear, clicking 3 would make 8-10 disappear... and so on.

As a starting point I thought I could use...

$(".button")[4].hide();

...because $(".button")[4] shows the html of my 4th button and $(".button").hide() alls the buttons when one is clicked.

But this gives a "hide is not a function" error.

index.html

<div class="score-inputs">
<form class="buttons">
  <input class="button" type="button" value="1"></input>
  <input class="button" type="button" value="2"></input>
  <input class="button" type="button" value="3"></input>
  <input class="button" type="button" value="4"></input>
  <input class="button" type="button" value="5"></input>
  <input class="button" type="button" value="6"></input>
  <input class="button" type="button" value="7"></input>
  <input class="button" type="button" value="8"></input>
  <input class="button" type="button" value="9"></input>
  <input class="button" type="button" value="10"></input>
</form>

<script>$(document).ready(() => {
  $(".button").click(function() {
    $(".button")[4].hide();
  });
});
</script>

Or is there a better approach to getting the result that I want?

Answer 1

using array syntax you get the dom element not the jquery element

use either

$(".button").eq(4).hide();

or

$(".button")[4].style.display = "none";