Multiple Sprite Animations

[TiaPhoenix]

Let me start with I know almost nothing when it comes to coding. I'm a graphic designer. It was a challenge to build my watch face. I did it (starting with someone elses work and making all my edits with my own graphics), then I wanted to add a animation on tap.... It's own several hour challenge. Easy part was building the sprite, hard part was making it only function on click... ( you pesky pointer-events)...

NOW I would like to have more than one sprite animation and it cycle through them on clicks. Similar to the ToyStory apple watchface with the little animatied shorts

Upon building my second sprite its like it can tell their are two different ones. SO must be me naming them wrong or something. 

<symbol id="frames" href="#sprite-image">
<animate id="anim" attributeName="value" begin="click" end="disable"
from="00" to="40" dur="2" />
<image href="dobby_00.png" width="300" height="300" />
</symbol>
<symbol id="frames" href="#sprite-image">
<animate id="anim" attributeName="value" begin="click" end="disable"
from="00" to="59" dur="2" />
<image href="goldensnitch_00.png" width="300" height="300" />
</symbol>

I tried this as well, hoping it would freeze one before starting the next on the next click:

<symbol id="frames" href="#sprite-image">
<animate id="anim" attributeName="value" begin="click" end="freeze"
from="00" to="40" dur="2" />

<image href="dobby_00.png" width="300" height="300" />

<animate id="anim" attributeName="value" begin="click" end="disable"
from="00" to="59" dur="2" />

<image href="goldensnitch_00.png" width="300" height="300" />
</symbol>

Didn't work either. 

How can I make a second one. (please be patient with me, as I may not fully understand terminoligy. I'm learning, and trying hard but it is a slow process)

[Gondwana]

You can use .animate() in your .js to trigger the end event, which should stop the relevant animation. You need a unique id for every SVG element that you wish to access in .js.

It's actually possible to use one sprite image to animate different image sequences, so long as you only want to see one sequence at a time. This can be done by changing the .href attribute (and other changed attributes) in .js. However, not all attributes can be changed in .js, and I wouldn't attempt this in the first instance.