Make planet  spin on click I'm attempting to get an image to spin a certain amount when a separate div is clicked - in this case, a 72 degree rotation.

I've added clickable divs in the top right and left of the viewport, that should make the planet image spin 72 degrees on each click. 

However, it only spins once. Unless I click it before the end of the animation, which is a weird effect. Can you please review this code and let me know why I can only spin once?

https://codepen.io/Punchyoual/pen/oGRLpX 

HTML:

&lt;body&gt;

&lt;div&gt;
  &lt;div id="left-button"&gt;&lt;/div&gt;
  &lt;div id="right-button"&gt;&lt;/div&gt;
    &lt;div id='inner-orbit'&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;


CSS:

body {
  background-image:url('https://space-facts.com/wp-content/uploads/magellanic-clouds.png');
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#left-button {
  position:fixed;
  top:0px;
  left:0px;
  height:50px;
  width:50px;
  background-color:red;
}

#right-button {
  position:fixed;
  top:0px;
  right:0px;
  height:50px;
  width:50px;
  background-color:red;
}

#inner-orbit {
  margin:0 auto;
  width:150vw;
  height:145vw;
  text-align:center;
  background-image:url('https://my-rewards.co.uk/s3/W1siZiIsIjIwMTcvMTAvMjMvMTUvNDMvNTAvODE3L3BsYW5ldHMyXzAxLnBuZyJdXQ?sha=069b6bb83dffffde');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  /*-webkit-animation: spin-right 25s linear infinite;
  animation: spin-right 25s infinite;
  transform:rotate(72deg);*/
}


#inner-orbit{transition: all 2s ease-in-out;}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


JS:

var degrees = 0;

$("#right-button").click(function() {

  degrees += 72;

  //$('.img').addClass('rotated'); // for one time rotation

  $("#inner-orbit").css({
    transform: "rotate(" + degrees + "deg)",
    "-ms-transform": "rotate(" + degrees + "deg)",
    "-moz-transform": "rotate(" + degrees + "deg)",
    "-webkit-transform": "rotate(" + degrees + "deg)",
    "-o-transform": "rotate(" + degrees + "deg)"
  });

  console.log(degrees);
});

$("#left-button").click(function() {

  degrees -= 72;

  //$('.img').addClass('rotated'); // for one time rotation

  $("#inner-orbit").css({
    transform: "rotate(" + degrees + "deg)",
    "-ms-transform": "rotate(" + degrees + "deg)",
    "-moz-transform": "rotate(" + degrees + "deg)",
    "-webkit-transform": "rotate(" + degrees + "deg)",
    "-o-transform": "rotate(" + degrees + "deg)"
  });

  console.log(degrees);
});
I'm not a smart man.

Just figured out that I was covering the buttons with the #orbit div...

&lt;body&gt;
  &lt;div&gt;
    &lt;div id='orbit'&gt;&lt;/div&gt;
    &lt;div id="left-button"&gt;&lt;/div&gt;
    &lt;div id="right-button"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;