SVG change circle speed duration for each separate drawing

Question

I have two SVG path animations that use <circle for the object to move along the path, how would it be possible to change their duration depending on each path separately, for instance, circle1 with a duration of 1s and circle2 with a duration of 2s? As it seems that changing the circle duration goes for all circles, not for their id-s

//Working
$('circle').find('animateMotion').attr('dur', '1s');

//Not working
$('circle1').find('animateMotion').attr('dur', '1s');
$('circle2').find('animateMotion').attr('dur', '2s');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="300" height="150">
     <path id="motionPath1"
     d="M 10 80 Q 52.5 10, 95 80 T 180 80"
     stroke="black" fill="transparent" />
    <circle class="circle" r=10 fill=red>
       <animateMotion dur="10s" repeatCount="indefinite">
          <mpath href="#motionPath1" />
      </animateMotion>
       </circle>
   </svg>
   <svg  width="300" height="150">
    <path id="motionpath2"
     d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
              <circle class="circle2" r=10 fill=red>
              
             <animateMotion dur="20s" repeatCount="indefinite"
     rotate="auto">
                 <mpath href="#motionpath2" />
             </animateMotion>
         </circle>

Answer 1

If you want to reference any circle in Jquery, you use $('circle'). For one circle with circle1 id, you use $('#circle1') (notice the hash). For any circle with class circle2, you use $('.circle2') (notice the dot). I added an id to the first circle and referenced it with it. For the second circle, I kept the circle2 class. The first $('circle').find('animateMotion').attr('dur', '1s'); acts on all circles, but it is overriden afterwards. You can add the circle2 class to other elements, but you cannot add the circle1 id to any other element.

//Working
$('circle').find('animateMotion').attr('dur', '1s');

//Not working
$('#circle1').find('animateMotion').attr('dur', '1s');
$('.circle2').find('animateMotion').attr('dur', '2s');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg width="300" height="150">
     <path id="motionPath1"
     d="M 10 80 Q 52.5 10, 95 80 T 180 80"
     stroke="black" fill="transparent" />
    <circle id="circle1" class="circle" r=10 fill=red>
       <animateMotion dur="10s" repeatCount="indefinite">
          <mpath href="#motionPath1" />
      </animateMotion>
       </circle>
   </svg>
   <svg  width="300" height="150">
    <path id="motionpath2"
     d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
              <circle class="circle2" r=10 fill=red>
              
             <animateMotion dur="20s" repeatCount="indefinite"
     rotate="auto">
                 <mpath href="#motionpath2" />
             </animateMotion>
         </circle>