title: Change image position using variable + buttons
body: <p>I am trying to change the square's position (placeholder images) based on a variable, that I would like to change when the right and left buttons are clicked. I am not sure what I've done wrong, not even the debug button to show me if the variable is changing will work. Code below (Idk if the CSS is really needed but I added it anyway).</p>
  
  <p>edit: Here's a link to the code <a href="https://codepen.io/linelessmail/pen/yLNpGve" rel="nofollow noreferrer">https://codepen.io/linelessmail/pen/yLNpGve</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button id="left" class="button" style="font-size :40px;height:100px;width:300px"&gt;Left&lt;/button&gt;
  &lt;button id="right" class="button" style="font-size : 40px;height:100px;width:300px"&gt;Right&lt;/button&gt; 
  &lt;button onClick="test()"&gt;DEBUG&lt;/button&gt;
  &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Blended_colour_wheel.svg/300px-Blended_colour_wheel.svg.png" alt="Wheel" width="800"height="800" id="wheel"&gt;
  
  
  &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Square_-_black_simple.svg/1200px-Square_-_black_simple.svg.png" alt="square" width="200"height="200" id="square"&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#right {
      position:absolute;
      top: 60px;
      left: 1000px;
  }
  
  #left {
      position:absolute;
      top: 240px;
      left: 1000px;
  }
  
  #wheel {
      position:absolute;
      top: 50px;
      left: 50px;
      transform-origin: centre;
  }
  
  #square {
      position:absolute;
      top: 400px;
      left: 1000px;
      transform-origin: centre;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(document).ready(function() {
    var deg = 0;
    var position = 1;
  
    $(".button").on("click", function() {
      if ($(this).is("#left")) {
        deg = deg - 32.7272727273;
        var position = position - 1;
        if (position == 1) {
  square.style.marginLeft = '1000px';
  square.style.marginLeft = '400px';
  }
  if (position == 2) {
  square.style.marginLeft = '1300px';
  square.style.marginLeft = '400px';
  } 
  if (position == 3) {
  square.style.marginLeft = '1000px';
  square.style.marginLeft = '600px';
  } 
  if (position == 4) {
  square.style.marginLeft = '1300px';
  square.style.marginLeft = '600px';
  } 
  if (position == 5) {
  var position = 1
  } 
      } else {
        deg = deg + 32.7272727273;
        var position = position + 1;
        if (position == 1) {
  square.style.marginLeft = '1000px';
  square.style.marginLeft = '400px';
  }
  if (position == 2) {
  square.style.marginLeft = '1300px';
  square.style.marginLeft = '400px';
  } 
  if (position == 3) {
  square.style.marginLeft = '1000px';
  square.style.marginLeft = '600px';
  } 
  if (position == 4) {
  square.style.marginLeft = '1300px';
  square.style.marginLeft = '600px';
  } 
  if (position == 5) {
  var position = 1
  } 
      }
  
      $("#wheel").css({
        "-webkit-transform": "rotate(" + deg + "deg)",
        "-moz-transform": "rotate(" + deg + "deg)",
        "-ms-animation:": "rotate(" + deg + "deg)",
        "-o-animation": "rotate(" + deg + "deg)",
        transform: "rotate(" + deg + "deg)"
  
      });
  
      function test(click){
      alert("Position variable is " + position);
  }
    });
  });
  </code></pre>