title: How to rotate an image by 10 degrees with each right click without impacting other images with the same class
body: <p>I want to rotate an image by 10 degrees with each right click, without impacting other images with the same class.
  I use the right click only in a defined area, because the left click and the double click are used for other actions.</p>
  <p>js</p>
  <pre><code>document.getElementById('dropzone').addEventListener('contextmenu',(e)=&gt;{
    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(&quot;elementRotate&quot;);
              degrees += 10;
              $(&quot;.elementRotate&quot;).click(function () {
                  degrees += 10;
                  $(this).css(&quot;transform&quot;, &quot;rotate(&quot; + degrees + &quot;deg)&quot;);  
                  targetElement.classList.remove( &quot;elementRotate&quot; );           
              });
          }
      })              
  })
  </code></pre>
  <p>html</p>
  <pre><code>
  &lt;div id=&quot;dropzone&quot;&gt;
      &lt;img id=&quot;paper1&quot; class=&quot;draggable resizable TrgtPaper&quot; src=&quot;{{ asset('images/IPSC_Mini_Target.png') }}&quot; title=&quot;target&quot; alt=&quot;minitarget&quot;&gt;
      &lt;img id=&quot;paper1&quot; class=&quot;draggable resizable TrgtPaper&quot; src=&quot;https://zupimages.net/up/20/50/z9va.png&quot; title=&quot;target&quot; alt=&quot;minitarget&quot;&gt;
      &lt;img id=&quot;decor1&quot; class=&quot;draggable elementRotate resizable&quot; src=&quot;https://www.tsvstagemaker.fr/images/Panneau_tsv1.svg&quot; width=&quot;83&quot; alt=&quot;images/svg/panneau.svg&quot;&gt;
  
      &lt;svg id=&quot;decorsvg&quot; class=&quot;draggable elementRotate resizable&quot; width=&quot;91&quot; height=&quot;64&quot; viewBox=&quot;0 0 91 64&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;rect x=&quot;6.20657&quot; y=&quot;42&quot; width=&quot;1.42056&quot; height=&quot;21&quot; transform=&quot;rotate(14.3552 6.20657 42)&quot; fill=&quot;#5779B6&quot; /&gt;
      &lt;rect x=&quot;6.02635&quot; y=&quot;41.6958&quot; width=&quot;1.92056&quot; height=&quot;21.5&quot; transform=&quot;rotate(14.3552 6.02635 41.6958)&quot; stroke=&quot;black&quot; stroke-opacity=&quot;0.6&quot; stroke-width=&quot;0.5&quot; /&gt;
      &lt;rect x=&quot;82.9484&quot; y=&quot;42.3693&quot; width=&quot;1.42056&quot; height=&quot;21&quot; transform=&quot;rotate(-14.6511 82.9484 42.3693)&quot; fill=&quot;#5779B6&quot; /&gt;
      &lt;rect x=&quot;82.6433&quot; y=&quot;42.1907&quot; width=&quot;1.92056&quot; height=&quot;21.5&quot; transform=&quot;rotate(-14.6511 82.6433 42.1907)&quot; stroke=&quot;black&quot; stroke-opacity=&quot;0.6&quot; stroke-width=&quot;0.5&quot; /&gt;
      &lt;rect class=&quot;panneau1&quot; x=&quot;3.50002&quot; y=&quot;0.5&quot; width=&quot;83&quot; height=&quot;52&quot; fill=&quot;#CD7330&quot; fill-opacity=&quot;0.58&quot; stroke=&quot;#5779B6&quot; /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>Thank you</p>