XSLT doubling outputs with variances for toggled H

XSLT 2.0

The ultimate goal for my project is to output a webpage which provides two views of the same medieval document to the user according to two academic standards, between which the user can toggle with a button (see a proof of concept from 18 months and many iterations ago here ).

This requires me to frequently output two HTML segments from a single XSLT template call, differentiated by their @class with value 'inter' or 'diplo'. This is beginning to negatively affect the 'named entities' (people and places) which are subject to multiple templates.

For example, at https://xsltfiddle.liberty-development.net/3NzcBtW one finds that I treat the very first instance of <persName>:

 <persName nymRef="#Bernard_Cogota_MSP-AU" role="dep">B<supplied reason="expname">ernardus</supplied> Cogata</persName>

So that it outputs:

 <a href="http://foo.com/person/Bernard_Cogota_MSP-AU" class="inter">Bernardus Cogata</a>
 <span class="diplo">Bernardus Cogata</span>

But, if I add this template (seen at https://xsltfiddle.liberty-development.net/3NzcBtW/1):

<xsl:template match="tei:supplied">
    <span class="supplied inter"><xsl:apply-templates/></span>
    <span class="supplied diplo">[<xsl:apply-templates/>]</span>
</xsl:template>

It outputs the two spans to both the <persName> outputs, which will produce incorrect display results from javascript and css:

<a href="http://foo.com/person/Bernard_Cogota_MSP-AU" class="inter">B<span class="supplied inter">ernardus</span><span class="supplied diplo">[ernardus]</span> Cogata</a>
<span class="diplo">B<span class="supplied inter">ernardus</span><span class="supplied diplo">[ernardus]</span> Cogata</span>

I'm wondering if there is a way within XSLT to output rather:

<a href="http://foo.com/person/Bernard_Cogota_MSP-AU" class="inter">B<span class="supplied inter">ernardus</span> Cogata</a>
<span class="diplo">B<span class="supplied diplo">[ernardus]</span> Cogata</span>

Should I instead be considering dumping out the document body (currently ) into two separate <div class="inter"> and <div class="diplo">? Possibly using modes to then build the separate <div>?

The alternate is to set a unique class for each discrete template output and then manage the toggle effect with a large list of classes instead of a whole group. But it strikes me that would be an inelegant solution that outputs more than necessary to the browser.

Many thanks in advance.