Continue rotation on image without skipping back to top position

I have been trying for ages to make this javascript-code continue the rotation of the pane-element from where it currently is when clicking and dragging on the rotation button. Now it skips back to top-position first, then I am able to rotate it. I just can’t seem to make it.
Any help on this is really appriciated!

Codepen:
https://codepen.io/MrSounds/pen/zYLzdYJ

 //ROTATION 
  let rotationHistory = [];
  var $rotateBtn = $('#pane_center');
  const $rotationInput = $('#rotation');
  const $pane = $('#pane');
  const input = document.getElementById('rotation');

document.addEventListener('mouseup', function() {
  let rotation = pane.style.transform ? parseInt(pane.style.transform.match(/-?d+/g)[0]) : 0;
  rotation = (rotation % 360 + 360) % 360;
  input.value = rotation;
});

// Update the input field with the current rotation of the pane
$rotationInput.val(parseInt($pane.css('transform').split(/[()]/)[1]) || 0);

// Update the rotation of the pane when the input value changes
document.getElementById('rotation').addEventListener('input', function() {
  const rotationInput = document.getElementById('rotation');
  const rotation = parseInt(rotationInput.value, 10);
  document.getElementById('pane').style.transform = 'rotate(' + rotation + 'deg)';
});
  
    function get_degrees(mouse_x, mouse_y) {
  const pane = $('#pane');
  const radius  = pane.outerWidth() / 2;
  const center_x    = pane.offset().left + radius;
    const center_y  = pane.offset().top + radius;

  const radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    const degrees   = Math.round((radians * (180 / Math.PI) * -1) + 100);

    return degrees;
    }
  
$rotateBtn.on('mousedown touchstart', function (event) {
  $(document).off("mousemove touchmove", onMove);
  
  const click_degrees = get_degrees(event.pageX, event.pageY);

  $(document).bind('mousemove touchmove', click_degrees, function(event) {
    const pane = $('#pane');
    let degrees = get_degrees(event.pageX, event.pageY) - click_degrees;
    pane.css('transform', 'rotate('+degrees+'deg)');
    
  // Store the current rotation in the history array
  rotationHistory.push(degrees);
  });
});

  animate();

  function onUp(e) {       
  $(document).off("mousemove");
  $(document).off("touchend");
  $(document).on("mousemove", onMove);
  calc(e);
  clicked = null;
  }
  
  $('#undoBtn').on('click', function(event) {
  rotationHistory.pop();
  const previousRotation = rotationHistory[rotationHistory.length - 1] || 0;
  $('#pane').css('transform', 'rotate(' + previousRotation + 'deg)');
});
  
  $('#redoBtn').on('click', function(event) {
  const nextRotation = rotationHistory[rotationHistory.length] || 0;
  if (nextRotation) {
    $('#pane').css('transform', 'rotate(' + nextRotation + 'deg)');
    rotationHistory.push(nextRotation);
  }
});
  

`