How to append a number to an ID inside an XSL file

Question

I have the following XSL file which will be repeated many times (in my case 4 times):

<xsl:if test="Html/root/lcGroup/txtCity != ''">
    <div id="labOCSign" class="tableHeading"></div>
    <h4>
        <span id="spnCity">
            <xsl:value-of select="Html/root/lcGroup/txtCity" />
        </span>
        <xsl:if test="Html/root/lcGroup/txtZip != ''">
            <xsl:text>, </xsl:text>
            <xsl:value-of select="Html/root/lcGroup/dlState" />
            <xsl:text>&#160;</xsl:text>
            <xsl:value-of select="Html/root/lcGroup/txtZip" />
        </xsl:if>
    </h4>
</xsl:if>

CSS:

.tableHeading
{
    background: #E5E5E5 url("../theImages/recommendationBadge.png") top left no-repeat;
    padding-top: 60px;
    padding-bottom: 25px;
}
.tableHeading2
{
    background: #E5E5E5 url("../theImages/recommendationBadge2.png") top left no-repeat;
    padding-top: 60px;
    padding-bottom: 25px;
}

I have the following JQuery which will replace class of the labOCSign:

var cityName = $(".spnCity").text();
var weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][(new Date()).getDay()];

if (cityName.toLowerCase() == "rye") {
    if (weekDay == "Monday" || weekDay == "Wednesday" || weekDay == "Friday") {
        if (validNow("08:00AM", "5:30PM")) {
            $("#labOCSign").removeClass("tableHeading2").addClass("tableHeading");
        }
        else {
            $("#labOCSign").removeClass("tableHeading").addClass("tableHeading2");
        }
    }
}
else if (cityName.toLowerCase() == "new roc") {
    if (weekDay == "Monday" || weekDay == "Wednesday" || weekDay == "Friday") {
        if (validNow("08:00AM", "5:30PM")) {
            $("#labOCSign").removeClass("tableHeading2").addClass("tableHeading");
        }
        else {
            $("#labOCSign").removeClass("tableHeading").addClass("tableHeading2");
        }
    }
}

The issue I have now is the script only takes one instance.

How can I add a number after spanCity to ensure they are all unique in the XSL file?

So, it will be #spnCity1, #spnCity2, #spnCity3, #spnCity4...

Answer 1

In case the provided XSLT part is e.g. in an <xsl:for-each> loop, you can use position() to get an incremented value (the current position in the loop) and concat():

<span id="concat('spnCity', position())">

Update as suggested approach didn't work in the settings:

Two different kind of notations that should work are:

<span>
  <xsl:attribute name="id" select="concat('spnCity', position())"/>
</span>

and

<span>
  <xsl:attribute name="id">
    <xsl:value-of select="concat('spnCity', position())"/> 
  </xsl:attribute>
</span>

The content can just be added after the attribute:

<span>
  <xsl:attribute name="id">
    <xsl:value-of select="concat('spnCity', position())"/> 
  </xsl:attribute>
  <xsl:value-of select="Html/root/lcGroup/txtCity" />
</span>

Just created a Demo with both versions.