title: Add div classes in XSLT 1.0 with conditions
body: <p>With my database software, I am able to export my albums collection in HTML with XSL template.
  I manage to modify XSL template to support Bootstrap 4.
  Now, I'm trying to add an alphabetical filter. I tinkered a javascript and it works but without animation when I apply filter.</p>
  
  <p>So, to add animations (fade in, fade out), like this example here <a href="https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category" rel="nofollow noreferrer">https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category</a>, I need to add proper classes in a div with XSL in each album according to the first letter of an artist of the album.
  <strong>Remark:</strong> my current javascript is temporary, with the right classes in albums, it will be simplified as in the bootsnip.</p>
  
  <p>Because I use a database software to export in HTML, I'm not really able to provide a XML input. But if I export my database in XML, here is a short sample of the result:</p>
  
  <pre class="lang-xml prettyprint-override"><code>    &lt;musiclist&gt;
  &lt;music&gt;
    &lt;id&gt;8881&lt;/id&gt;
    &lt;index&gt;237&lt;/index&gt;
    &lt;title&gt;A Journey To Rotterdam&lt;/title&gt;
    &lt;titlesort&gt;Journey To Rotterdam&lt;/titlesort&gt;
    &lt;releasedate&gt;
      &lt;year&gt;
        &lt;displayname&gt;2013&lt;/displayname&gt;
      &lt;/year&gt;
      &lt;month&gt;5&lt;/month&gt;
      &lt;day&gt;18&lt;/day&gt;
      &lt;date&gt;18/05/2013&lt;/date&gt;
    &lt;/releasedate&gt;
    &lt;recordingdate/&gt;
    &lt;artists&gt;
      &lt;artist&gt;
        &lt;displayname&gt;Jepht&amp;#233; Guillaume&lt;/displayname&gt;
        &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\JephtGuillaume8878_t.jpg&lt;/templateimage&gt;
        &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\JephtGuillaume8878_i.jpg&lt;/scaledimage&gt;
        &lt;sortname&gt;Guillaume, Jepht&amp;#233;&lt;/sortname&gt;
        &lt;lastname&gt;Guillaume&lt;/lastname&gt;
        &lt;url&gt;https://www.facebook.com/jephte.t.guillaume&lt;/url&gt;
        &lt;firstname&gt;Jepht&amp;#233;&lt;/firstname&gt;
      &lt;/artist&gt;
      &lt;artist&gt;
        &lt;displayname&gt;Diephuis&lt;/displayname&gt;
        &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\Diephuis8917_t.jpg&lt;/templateimage&gt;
        &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\Diephuis8917_i.jpg&lt;/scaledimage&gt;
        &lt;sortname&gt;Beljaars, Barend-Jan&lt;/sortname&gt;
        &lt;lastname&gt;Beljaars&lt;/lastname&gt;
        &lt;url&gt;https://www.discogs.com/fr/artist/2569040-Diephuis&lt;/url&gt;
        &lt;firstname&gt;Barend-Jan&lt;/firstname&gt;
      &lt;/artist&gt;
    &lt;/artists&gt;
    &lt;artistfirstletter&gt;
      &lt;displayname&gt;G&lt;/displayname&gt;
      &lt;sortname&gt;G&lt;/sortname&gt;
    &lt;/artistfirstletter&gt;
    &lt;composers/&gt;
    &lt;genres&gt;
      &lt;genre&gt;
        &lt;displayname&gt;Deep House&lt;/displayname&gt;
      &lt;/genre&gt;
      &lt;genre&gt;
        &lt;displayname&gt;Electronic&lt;/displayname&gt;
      &lt;/genre&gt;
    &lt;/genres&gt;
    &lt;notes&gt;100 exemplaires&lt;/notes&gt;
    &lt;label&gt;
      &lt;displayname&gt;Sacred Rhythm Music&lt;/displayname&gt;
      &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\SacredRhythmMusic818_t.jpg&lt;/templateimage&gt;
      &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\SacredRhythmMusic818_i.jpg&lt;/scaledimage&gt;
      &lt;sortname&gt;Sacred Rhythm Music (Joe Claussell)&lt;/sortname&gt;
      &lt;lastname&gt;Sacred Rhythm Music (Joe Claussell)&lt;/lastname&gt;
      &lt;url&gt;http://www.sacredrhythmmusic.net/news.html&lt;/url&gt;
    &lt;/label&gt;
    &lt;labelnumber&gt;SRM 266&lt;/labelnumber&gt;
    &lt;length&gt;26:31&lt;/length&gt;
    &lt;lengthsecs&gt;1591&lt;/lengthsecs&gt;
    &lt;nrtracks&gt;3&lt;/nrtracks&gt;
    &lt;cddbgenreid1&gt;0&lt;/cddbgenreid1&gt;
    &lt;compositions/&gt;
    &lt;submissiondate/&gt;
    &lt;format&gt;
      &lt;displayname&gt;12 inch Vinyl&lt;/displayname&gt;
      &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\12inchVinyl168_t.png&lt;/templateimage&gt;
      &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\Vinyl12inchAlbum16.jpg&lt;/scaledimage&gt;
    &lt;/format&gt;
    &lt;cddbgenreid2&gt;0&lt;/cddbgenreid2&gt;
    &lt;rating&gt;0&lt;/rating&gt;
    &lt;rating&gt;
      &lt;displayname&gt;0&lt;/displayname&gt;
      &lt;sortname&gt;0&lt;/sortname&gt;
    &lt;/rating&gt;
    &lt;studios/&gt;
    &lt;conductors/&gt;
    &lt;orchestras/&gt;
    &lt;choruses/&gt;
    &lt;musicians/&gt;
    &lt;credits/&gt;
    &lt;hash&gt;{CD9CBF02-6850-484C-913F-C63324D6DF15}&lt;/hash&gt;
    &lt;purchasedate&gt;
      &lt;year&gt;
        &lt;displayname&gt;2016&lt;/displayname&gt;
      &lt;/year&gt;
      &lt;month&gt;1&lt;/month&gt;
      &lt;day&gt;13&lt;/day&gt;
      &lt;date&gt;13/01/2016&lt;/date&gt;
    &lt;/purchasedate&gt;
    &lt;purchaseprice&gt;7,55 &amp;#8364;&lt;/purchaseprice&gt;
    &lt;origreleasedate/&gt;
    &lt;store&gt;
      &lt;displayname&gt;Bandcamp&lt;/displayname&gt;
      &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\Bandcamp8680_t.png&lt;/templateimage&gt;
      &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\Bandcamp8680_i.jpg&lt;/scaledimage&gt;
      &lt;sortname&gt;Bandcamp&lt;/sortname&gt;
      &lt;lastname&gt;Bandcamp&lt;/lastname&gt;
      &lt;url&gt;https://bandcamp.com/&lt;/url&gt;
    &lt;/store&gt;
    &lt;spars&gt;
      &lt;displayname&gt;DDD&lt;/displayname&gt;
    &lt;/spars&gt;
    &lt;country&gt;
      &lt;displayname&gt;Etats-Unis&lt;/displayname&gt;
      &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\EtatsUnis1000_t.gif&lt;/templateimage&gt;
      &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\EtatsUnis1000_i.jpg&lt;/scaledimage&gt;
    &lt;/country&gt;
    &lt;sounds&gt;
      &lt;sound&gt;
        &lt;displayname&gt;Stereo&lt;/displayname&gt;
      &lt;/sound&gt;
    &lt;/sounds&gt;
    &lt;extras/&gt;
    &lt;packaging&gt;
      &lt;displayname&gt;Sleeve&lt;/displayname&gt;
    &lt;/packaging&gt;
    &lt;rare boolvalue="1"&gt;Yes&lt;/rare&gt;
    &lt;collectionstatus listid="3"&gt;In Collection&lt;/collectionstatus&gt;
    &lt;nrdiscs&gt;1&lt;/nrdiscs&gt;
    &lt;coverfront&gt;C:\Users\Gros_\Documents\Music Collector\Images\SRM 266 front.jpg&lt;/coverfront&gt;
    &lt;coverback&gt;C:\Users\Gros_\Documents\Music Collector\Images\SRM 266 rear.jpg&lt;/coverback&gt;
    &lt;backgroundbackdrop&gt;CLZBACKDROP&lt;/backgroundbackdrop&gt;
    &lt;bpalbumid&gt;104663034&lt;/bpalbumid&gt;
    &lt;links&gt;
      &lt;link&gt;
        &lt;description&gt;6a A Journey To Rotterdam&lt;/description&gt;
        &lt;url&gt;https://bandcamp.com/EmbeddedPlayer/album=720079312&lt;/url&gt;
        &lt;urltype&gt;URL&lt;/urltype&gt;
      &lt;/link&gt;
    &lt;/links&gt;
    &lt;condition/&gt;
    &lt;mediacondition/&gt;
    &lt;quantity&gt;1&lt;/quantity&gt;
    &lt;lastmodified&gt;
      &lt;date&gt;06/01/2017 16:51:15&lt;/date&gt;
    &lt;/lastmodified&gt;
    &lt;dateadded&gt;
      &lt;date&gt;19/11/2016 13:30:09&lt;/date&gt;
    &lt;/dateadded&gt;
    &lt;thumbfilepath&gt;C:\Users\Gros_\Documents\Music Collector\Thumbnails\6A093329A852EA2DF10C63CADC9F0040.jpg&lt;/thumbfilepath&gt;
    &lt;details&gt;
      &lt;detail type="disc"&gt;
        &lt;id&gt;8882&lt;/id&gt;
        &lt;index&gt;1&lt;/index&gt;
        &lt;title&gt;A Journey To Rotterdam&lt;/title&gt;
        &lt;titlesort&gt;Journey To Rotterdam&lt;/titlesort&gt;
        &lt;releasedate&gt;
          &lt;year&gt;
            &lt;displayname&gt;2013&lt;/displayname&gt;
          &lt;/year&gt;
          &lt;month&gt;5&lt;/month&gt;
          &lt;day&gt;18&lt;/day&gt;
          &lt;date&gt;18/05/2013&lt;/date&gt;
        &lt;/releasedate&gt;
        &lt;recordingdate/&gt;
        &lt;artists&gt;
          &lt;artist&gt;
            &lt;displayname&gt;Jepht&amp;#233; Guillaume&lt;/displayname&gt;
            &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\JephtGuillaume8878_t.jpg&lt;/templateimage&gt;
            &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\JephtGuillaume8878_i.jpg&lt;/scaledimage&gt;
            &lt;sortname&gt;Guillaume, Jepht&amp;#233;&lt;/sortname&gt;
            &lt;lastname&gt;Guillaume&lt;/lastname&gt;
            &lt;url&gt;https://www.facebook.com/jephte.t.guillaume&lt;/url&gt;
            &lt;firstname&gt;Jepht&amp;#233;&lt;/firstname&gt;
          &lt;/artist&gt;
          &lt;artist&gt;
            &lt;displayname&gt;Diephuis&lt;/displayname&gt;
            &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\Diephuis8917_t.jpg&lt;/templateimage&gt;
            &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\Diephuis8917_i.jpg&lt;/scaledimage&gt;
            &lt;sortname&gt;Beljaars, Barend-Jan&lt;/sortname&gt;
            &lt;lastname&gt;Beljaars&lt;/lastname&gt;
            &lt;url&gt;https://www.discogs.com/fr/artist/2569040-Diephuis&lt;/url&gt;
            &lt;firstname&gt;Barend-Jan&lt;/firstname&gt;
          &lt;/artist&gt;
        &lt;/artists&gt;
        &lt;artistfirstletter&gt;
          &lt;displayname&gt;G&lt;/displayname&gt;
          &lt;sortname&gt;G&lt;/sortname&gt;
        &lt;/artistfirstletter&gt;
        &lt;composers/&gt;
        &lt;genres&gt;
          &lt;genre&gt;
            &lt;displayname&gt;Deep House&lt;/displayname&gt;
          &lt;/genre&gt;
          &lt;genre&gt;
            &lt;displayname&gt;Electronic&lt;/displayname&gt;
          &lt;/genre&gt;
        &lt;/genres&gt;
        &lt;label&gt;
          &lt;displayname&gt;Sacred Rhythm Music&lt;/displayname&gt;
          &lt;templateimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\SacredRhythmMusic818_t.jpg&lt;/templateimage&gt;
          &lt;scaledimage&gt;C:\Users\Gros_\Documents\Music Collector\Images\Listitemimages\SacredRhythmMusic818_i.jpg&lt;/scaledimage&gt;
          &lt;sortname&gt;Sacred Rhythm Music (Joe Claussell)&lt;/sortname&gt;
          &lt;lastname&gt;Sacred Rhythm Music (Joe Claussell)&lt;/lastname&gt;
          &lt;url&gt;http://www.sacredrhythmmusic.net/news.html&lt;/url&gt;
        &lt;/label&gt;
        &lt;labelnumber&gt;SRM 266&lt;/labelnumber&gt;
        &lt;length&gt;26:31&lt;/length&gt;
        &lt;lengthsecs&gt;1591&lt;/lengthsecs&gt;
        &lt;nrtracks&gt;3&lt;/nrtracks&gt;
        &lt;cddbgenreid1&gt;0&lt;/cddbgenreid1&gt;
        &lt;compositions/&gt;
        &lt;submissiondate/&gt;
        &lt;cddbgenreid2&gt;0&lt;/cddbgenreid2&gt;
        &lt;rating&gt;0&lt;/rating&gt;
        &lt;rating&gt;
          &lt;displayname&gt;0&lt;/displayname&gt;
          &lt;sortname&gt;0&lt;/sortname&gt;
        &lt;/rating&gt;
        &lt;studios/&gt;
        &lt;conductors/&gt;
        &lt;orchestras/&gt;
        &lt;choruses/&gt;
        &lt;musicians/&gt;
        &lt;credits/&gt;
        &lt;bitrate&gt;0&lt;/bitrate&gt;
        &lt;filesize&gt;0&lt;/filesize&gt;
  &lt;/music&gt;
  &lt;/musiclist&gt;
  &lt;/musicinfo&gt;
  </code></pre>
  
  <p>Here is the XSL part of code I've modified: for each album, I want to retrieve each artist of the album and apply the correct class in album's div according to the first letter of this artist. I handle maximum 5 artists in each album. letter's classes are concatenate with layout Bootstrap classes.</p>
  
  <pre class="lang-xsl prettyprint-override"><code>&lt;xsl:template match="musiclist"&gt;
      &lt;xsl:for-each select="music"&gt;
          &lt;div align="center"&gt;
              &lt;xsl:for-each select="artists/artist/displayname"&gt;
                  &lt;xsl:variable name="count"select="position()"/&gt;
                  &lt;xsl:variable name="ArtistName"&gt;
                      &lt;xsl:value-of select="substring(artists/artist/displayname, 1, 1)"/&gt;
                  &lt;/xsl:variable&gt;
                  &lt;xsl:variable name="first-letter{$count}"&gt;
                      &lt;xsl:if test="ArtistName= 'A')"&gt; letterA &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'B')"&gt; letterB &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'C')"&gt; letterC &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'D')"&gt; letterD &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'E')"&gt; letterE &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'F')"&gt; letterF &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'G')"&gt; letterG &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'H')"&gt; letterH &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'I')"&gt; letterI &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'J')"&gt; letterJ &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'K')"&gt; letterK &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'L')"&gt; letterL &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'M')"&gt; letterM &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'N')"&gt; letterN &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'O')"&gt; letterO &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'P')"&gt; letterP &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'Q')"&gt; letterQ &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'R')"&gt; letterR &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'S')"&gt; letterS &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'T')"&gt; letterT &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'U')"&gt; letterU &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'V')"&gt; letterV &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'W')"&gt; letterW &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'X')"&gt; letterX &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'Y')"&gt; letterY &lt;/xsl:if&gt;
                      &lt;xsl:if test="ArtistName= 'Z')"&gt; letterZ &lt;/xsl:if&gt;
                  &lt;/xsl:variable&gt;
  
              &lt;/xsl:for-each&gt;
              &lt;xsl:attribute name="class"&gt;
                  &lt;xsl:value-of select="concat('col-xs-12 col-sm-6 col-md-2 filter ', $first-letter1, $first-letter2, $first-letter3, $first-letter4, $first-letter5 )"/&gt;
              &lt;/xsl:attribute&gt;
              &lt;xsl:apply-templates select="."/&gt;
          &lt;/div&gt;
      &lt;/xsl:for-each&gt; 
  &lt;/xsl:template&gt;
  
  &lt;xsl:template match="music"&gt;
      &lt;xsl:choose&gt;
          &lt;xsl:when test="$details = 'true'"&gt;
              &lt;xsl:variable name="the_href"&gt;details/&lt;xsl:value-of select="id"/&gt;.html&lt;/xsl:variable&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
              &lt;xsl:choose&gt;
                  &lt;xsl:when test="$absolutelinks = 'true'"&gt;
                      &lt;xsl:if test="coverfront!=''"&gt;
                          &lt;xsl:variable name="the_href"&gt;file:///&lt;xsl:value-of select="coverfront"/&gt;&lt;/xsl:variable&gt;
                      &lt;/xsl:if&gt;
                  &lt;/xsl:when&gt;
                  &lt;xsl:otherwise&gt;
                      &lt;xsl:if test="coverfront!=''"&gt;
                          &lt;xsl:variable name="the_href"&gt;images/&lt;xsl:value-of select="id"/&gt;f.jpg&lt;/xsl:variable&gt;
                      &lt;/xsl:if&gt;
                  &lt;/xsl:otherwise&gt;            
              &lt;/xsl:choose&gt;
          &lt;/xsl:otherwise&gt;            
      &lt;/xsl:choose&gt;
      &lt;xsl:choose&gt;
          &lt;xsl:when test="thumbfilepath!=''"&gt;
              &lt;xsl:variable name="the_img_src"&gt;images/&lt;xsl:value-of select="id"/&gt;t.jpg&lt;/xsl:variable&gt;
          &lt;/xsl:when&gt;
          &lt;xsl:otherwise&gt;
              &lt;xsl:variable name="the_img_src"&gt;images/mainitem.jpg&lt;/xsl:variable&gt;
          &lt;/xsl:otherwise&gt;            
      &lt;/xsl:choose&gt;
      &lt;xsl:variable name="the_caption"&gt;&lt;xsl:value-of select="title"/&gt;&lt;/xsl:variable&gt;
      &lt;a href="{$the_href}" title="{$the_caption}" &gt;&lt;img src="{$the_img_src}" class="img-fluid rounded"/&gt;&lt;/a&gt;
      &lt;xsl:if test="$thumbshowcaption = 'true'"&gt;
          &lt;xsl:if test="artists!=''"&gt;
              &lt;div class="artist"&gt;
                  &lt;xsl:for-each select="artists/artist/displayname"&gt;
                      &lt;xsl:apply-templates select="."/&gt;
                      &lt;xsl:if test="position()!=last()"&gt;
                          &lt;xsl:text&gt; | &lt;/xsl:text&gt;
                      &lt;/xsl:if&gt;
                  &lt;/xsl:for-each&gt;
              &lt;/div&gt;
          &lt;/xsl:if&gt;
          &lt;div class="album"&gt;&lt;xsl:value-of select="title"/&gt;&lt;/div&gt;
          &lt;br/&gt;
      &lt;/xsl:if&gt;  
  &lt;/xsl:template&gt;
  </code></pre>
  
  <p>Here you can see the result in HTML for an album:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row equal" id="album-table"&gt;
      &lt;div align="center" class="col-xs-12 col-sm-6 col-md-2 filter "&gt;
          &lt;a href="details/8660.html" title="Afrikan Basement - Unreleased Extended Versions - Disc 1"&gt;
              &lt;img src="images/8660t.jpg" class="img-fluid rounded"/&gt;
          &lt;/a&gt;
          &lt;div class="artist"&gt;Bolla&lt;/div&gt;
          &lt;div class="album"&gt;Afrikan Basement - Unreleased Extended Versions - Disc 1&lt;/div&gt;
          &lt;br/&gt;
      &lt;/div&gt;
      &lt;div align="center" class="col-xs-12 col-sm-6 col-md-2 filter "&gt;
          &lt;a href="details/8881.html" title="A Journey To Rotterdam"&gt;
              &lt;img src="images/8881t.jpg" class="img-fluid rounded"/&gt;
          &lt;/a&gt;
          &lt;div class="artist"&gt;Jepht&amp;#233; Guillaume | Diephuis&lt;/div&gt;
          &lt;div class="album"&gt;A Journey To Rotterdam&lt;/div&gt;
          &lt;br/&gt;
      &lt;/div&gt;
      &lt;div align="center" class="col-xs-12 col-sm-6 col-md-2 filter "&gt;
          &lt;a href="details/376.html" title="La Home Box - Disc 3"&gt;
              &lt;img src="images/376t.jpg" class="img-fluid rounded"/&gt;
          &lt;/a&gt;
          &lt;div class="artist"&gt;Laurent Garnier | Traumer | Bambounou&lt;/div&gt;
          &lt;div class="album"&gt;La Home Box - Disc 3&lt;/div&gt;
          &lt;br/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But if my code was correct, the result should look like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row equal" id="album-table"&gt;
      &lt;div align="center" class="col-xs-12 col-sm-6 col-md-2 filter letterB "&gt;
          &lt;a href="details/8660.html" title="Afrikan Basement - Unreleased Extended Versions - Disc 1"&gt;
              &lt;img src="images/8660t.jpg" class="img-fluid rounded"/&gt;
          &lt;/a&gt;
          &lt;div class="artist"&gt;Bolla&lt;/div&gt;
          &lt;div class="album"&gt;Afrikan Basement - Unreleased Extended Versions - Disc 1&lt;/div&gt;
          &lt;br/&gt;
      &lt;/div&gt;
      &lt;div align="center" class="col-xs-12 col-sm-6 col-md-2 filter letterJ letterD "&gt;
          &lt;a href="details/8881.html" title="A Journey To Rotterdam"&gt;
              &lt;img src="images/8881t.jpg" class="img-fluid rounded"/&gt;
          &lt;/a&gt;
          &lt;div class="artist"&gt;Jepht&amp;#233; Guillaume | Diephuis&lt;/div&gt;
          &lt;div class="album"&gt;A Journey To Rotterdam&lt;/div&gt;
          &lt;br/&gt;
      &lt;/div&gt;
      &lt;div align="center" class="col-xs-12 col-sm-6 col-md-2 filter letterL letterT letterB "&gt;
          &lt;a href="details/376.html" title="La Home Box - Disc 3"&gt;
              &lt;img src="images/376t.jpg" class="img-fluid rounded"/&gt;
          &lt;/a&gt;
          &lt;div class="artist"&gt;Laurent Garnier | Traumer | Bambounou&lt;/div&gt;
          &lt;div class="album"&gt;La Home Box - Disc 3&lt;/div&gt;
          &lt;br/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't figure out why XSL does not add the correct class to div whereas the concatenate works.</p>
  
  <p>Have you any hint? </p>
  
  <p>If I am able to add proper classes into div, I will be able to apply a new responsive and animated layout in html, just like <a href="https://vicstudio.de/StackOverflow/Solutions/1/fadenotworking.html" rel="nofollow noreferrer">this example here</a></p>
  
  <p>Thanks for your help.</p>