Move square jquery javascript keydown event

In the following web we handle a square of red color that will be able to be displaced along the screen according to the pressed buttons arrow of the keyboard.
We create the shape of the square with css by selecting a div assigning properties of position, background color, width and height.
We select the div with id "square" and use the keydown function as a keyboard event when pressing a button that creates a function that will perform the following operation:

Stores the keyboard code in a variable "key_code". We can see the keycode by activating "console.log(keycode)".
In the case that the keycode is one of the established, the div with id "square" will be displaced according to the assigned css property.

To move the square use the keys w, a, s, z.

<style>
  #square {
    background-color: red;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
  }
</style>
<div id="square"></div>
<!--Script jQuery-->
<script>
  $(function(){
    $("body").keydown(function (event) {
      let key_code = event.which;
      //console.log(key_code);
      switch (key_code) {
        case 65:
          $("#square").css("left", "-=10");
          break;
        case 87:
          $("#square").css("top", "-=10");
          break;
        case 83:
          $("#square").css("left", "+=10");
          break;
        case 90:
          $("#square").css("top", "+=10");
          break;
      }
    });
  });
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>