问如何在不影响同类图片的情况下，每次右键旋转图片10度

EN

// function for calculating current angle of images
function calculateAngle(elementId) {
    var element = document.getElementById(elementId);
    var tr = (window.getComputedStyle(element, null)).getPropertyValue("transform"),
        values = tr.split('(')[1],
        values = values.split(')')[0],
        values = values.split(','),
        a = values[0],
        b = values[1],
        c = values[2],
        d = values[3],
        radians = Math.atan2(b, a);
    if (radians < 0) {
        radians += (2 * Math.PI);
    }
    return Math.round(radians * (180 / Math.PI));
}

$(document).ready(function() {
  // disable right click browser context menu
  document.oncontextmenu = function() {return false;};
  
  $('.draggable').mousedown(function(e){ 
    if( e.button == 2 ) { 
      var selectedId = $(this).attr('id');
      var currentDegree = calculateAngle(selectedId);
      var newDegree = parseInt(currentDegree) + parseInt(10);
      $(this).css({"transform":"rotate(" + newDegree + "deg)"});
    } 
    return true; 
  });
});

/* set rotate 0 by default */
.draggable {
  transform: rotate(0deg);
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="dropzone">
  <img id="paper1" class="draggable resizable TrgtPaper" src="https://zupimages.net/up/20/50/z9va.png" title="target" alt="minitarget">
  <img id="decor1" class="draggable elementRotate resizable" src="https://www.tsvstagemaker.fr/images/Panneau_tsv1.svg" width="83" alt="images/svg/panneau.svg">
  <svg id="decorsvg" class="draggable elementRotate resizable" width="91" height="64" viewBox="0 0 91 64" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="6.20657" y="42" width="1.42056" height="21" transform="rotate(14.3552 6.20657 42)" fill="#5779B6" />
    <rect x="6.02635" y="41.6958" width="1.92056" height="21.5" transform="rotate(14.3552 6.02635 41.6958)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
    <rect x="82.9484" y="42.3693" width="1.42056" height="21" transform="rotate(-14.6511 82.9484 42.3693)" fill="#5779B6" />
    <rect x="82.6433" y="42.1907" width="1.92056" height="21.5" transform="rotate(-14.6511 82.6433 42.1907)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
    <rect class="panneau1" x="3.50002" y="0.5" width="83" height="52" fill="#CD7330" fill-opacity="0.58" stroke="#5779B6" />
  </svg>
</div>

document.getElementById('dropzone').addEventListener('contextmenu', (e) => {
  e.preventDefault();

  document.addEventListener('click', function(e) {
    let degrees = 0;
    let targetElement = e.target || e.srcElement;
    // draggable
    if (targetElement.classList.contains('draggable')) {
      targetElement.classList.add("elementRotate");
      degrees += 10;
      $(".elementRotate").click(function() {
        degrees += 10;
        $(this).css("transform", "rotate(" + degrees + "deg)");
        targetElement.classList.remove("elementRotate");
      });

    }

  })
})


// rotation elements      
//change out contextmenu with click if you want it onclick
 $(".elementRotate").contextmenu(function (e) {
   if (this.style.transform.length){
     var num = parseInt(this.style.transform.split("(")[1])
     num += 10
     $(this).css("transform", "rotate(" + num + "deg)");  
   } else {
     $(this).css("transform", "rotate(" + 10 + "deg)"); 
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropzone">

<!--  <img id="paper1" class="draggable resizable TrgtPaper" src="{{ asset('images/IPSC_Mini_Target.png') }}" title="target" alt="minitarget">
-->
  <img id="paper1" class="draggable resizable TrgtPaper" src="https://zupimages.net/up/20/50/z9va.png" title="target" alt="minitarget">

  <img id="decor1" class="draggable elementRotate resizable" src="https://www.tsvstagemaker.fr/images/Panneau_tsv1.svg" width="83" alt="images/svg/panneau.svg">

  <svg id="decorsvg" class="draggable elementRotate resizable" width="91" height="64" viewBox="0 0 91 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6.20657" y="42" width="1.42056" height="21" transform="rotate(14.3552 6.20657 42)" fill="#5779B6" />
<rect x="6.02635" y="41.6958" width="1.92056" height="21.5" transform="rotate(14.3552 6.02635 41.6958)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
<rect x="82.9484" y="42.3693" width="1.42056" height="21" transform="rotate(-14.6511 82.9484 42.3693)" fill="#5779B6" />
<rect x="82.6433" y="42.1907" width="1.92056" height="21.5" transform="rotate(-14.6511 82.6433 42.1907)" stroke="black" stroke-opacity="0.6" stroke-width="0.5" />
<rect class="panneau1" x="3.50002" y="0.5" width="83" height="52" fill="#CD7330" fill-opacity="0.58" stroke="#5779B6" />
</svg>

</div>