how to create seperate html element for each comma separated value using xslt

i have xml format, which contains array of values like following:

<xml total="446">
    <document>
        <id><![CDATA[binary:181-22559]]></id>
        <language><![CDATA[[Croatian]]]></language>
        <application><![CDATA[]]></application>
    </document>
  <document>
        <id><![CDATA[binary:181-22559]]></id>
        <language><![CDATA[[English]]]></language>
        <application><![CDATA[[Outdoor, LED, Indoor, Signage]]]></application>
   </document>
</xml>

i am facing following 2 issues when try to render above xml using xslt: 1. it is rendering along with square brackets '[' 2. i am not able to create separate html element for comma separated values.

following is my xslt:

<xsl:stylesheet version="1.0" xmlns:xsl="http://ift.tt/tCZ8VR">

        <xsl:output method="xml" indent="yes"/>
         
        <xsl:template match="/">
      
      <hr class="grid-hr inner-grid"/>
                <fieldset>
                        <legend>%%filter_document_language%%:</legend>
                        <label class="visuallyhidden" for="document-language">Language:</label>
                        <select id="document-language">
                                <option value="All" selected="selected">All</option>
                                <xsl:if test="/xml/document/language/text()">
                                        <xsl:for-each select="xml/document">
                                                <xsl:sort select="language"/>
                                                <xsl:if test="language/text()">
                                                        <xsl:variable name="lastLanguage" select="language"/>
                                                        <xsl:if test="not(preceding-sibling::document[language=$lastLanguage])">
                                                                <xsl:variable name="language">
                                                                        <xsl:value-of select="language"/>
                                                                </xsl:variable>
                                                                <option value="{$language}" selected=""><xsl:copy-of select="$language" /></option>
                                                        </xsl:if>
                                                </xsl:if>
                                        </xsl:for-each>
                                </xsl:if>
                        </select>
                </fieldset>
        <hr class="grid-hr inner-grid"/>
                        <fieldset>
                        
                                <legend>%%filter-by-application%%:</legend>
                                <ul class="itembrowser-filter">
                                        <xsl:for-each select="xml/document">
                                                <xsl:sort select="application"/>
                                                <xsl:if test="application/text()">
                                                                <xsl:variable name="lastApplication" select="application"/>
                                                                <xsl:if test="not(preceding-sibling::document[application=$lastApplication])">
                                                                        <xsl:variable name="application">
                                                                                <xsl:value-of select="application"/>

                                                                        </xsl:variable>
                                                                        <li>
                                                                                <label>
                                                                                        <input type="checkbox" class="input-big-checkbox" name="application-filter" value="{$application}"/>
                                                                                        <span class="label"><xsl:copy-of select="$application" /></span>
                                                                                </label>
                                                                        </li>
                                                                </xsl:if>
                                                        
                                                </xsl:if>
                                        </xsl:for-each>
                                </ul>
                        </fieldset>
    </xsl:template>
        
</xsl:stylesheet>

my expected output should be as following:

<hr class="grid-hr inner-grid">
<fieldset>
        <legend>Filter by Document Language:</legend>
        <label class="visuallyhidden" for="document-language">Language:</label>
        <select id="document-language">
                <option value="All" selected="selected">All</option>
                <option value="Croatian" selected="">Croatian</option>
                <option value="English" selected="">English</option>
        </select>
</fieldset>
<hr class="grid-hr inner-grid">
<fieldset>
        <legend>Filter by Application:</legend>
        <ul class="itembrowser-filter">
                <li>
                        <label>
                                <input type="checkbox" class="input-big-checkbox" name="application-filter" value="Outdoor">
                                <span class="label">Outdoor</span>
                        </label>
                        <label>
                                <input type="checkbox" class="input-big-checkbox" name="application-filter" value="LED]">
                                <span class="label">LED</span>
                        </label>
                        <label>
                                <input type="checkbox" class="input-big-checkbox" name="application-filter" value="Indoor">
                                <span class="label">Indoor</span>
                        </label>
                        <label>
                                <input type="checkbox" class="input-big-checkbox" name="application-filter" value="Signage">
                                <span class="label">Signage</span>
                        </label>
                </li>
        </ul>
</fieldset>

if anybody can help me out, then it would be great.