Css rating circle embedded in PHP code
<p>I'm trying to use a jsfiddle to my page, but I can't figure out how embed it with my existing code.</p>

<p><a href="http://jsfiddle.net/mLA7X/4952/" rel="nofollow">JSFiddle</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="radial-progress" data-progress="0"&gt;
&lt;div class="circle"&gt;
    &lt;div class="mask full"&gt;
        &lt;div class="fill"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mask half"&gt;
        &lt;div class="fill"&gt;&lt;/div&gt;
        &lt;div class="fill fix"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="shadow"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="inset"&gt;
    &lt;div class="percentage"&gt;
        &lt;div class="numbers"&gt;&lt;span&gt;-&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;0,1&lt;/span&gt;&lt;span&gt;0,2&lt;/span&gt;&lt;span&gt;0,3&lt;/span&gt;&lt;span&gt;0,4&lt;/span&gt;&lt;span&gt;0,5&lt;/span&gt;&lt;span&gt;0,6&lt;/span&gt;&lt;span&gt;0,7&lt;/span&gt;&lt;span&gt;0,8&lt;/span&gt;&lt;span&gt;0,9&lt;/span&gt;&lt;span&gt;1&lt;/span&gt;&lt;span&gt;1,1&lt;/span&gt;&lt;span&gt;1,2&lt;/span&gt;&lt;span&gt;1,3&lt;/span&gt;&lt;span&gt;1,4&lt;/span&gt;&lt;span&gt;1,5&lt;/span&gt;&lt;span&gt;1,6&lt;/span&gt;&lt;span&gt;1,7&lt;/span&gt;&lt;span&gt;1,8&lt;/span&gt;&lt;span&gt;1,9&lt;/span&gt;&lt;span&gt;2&lt;/span&gt;&lt;span&gt;2,1&lt;/span&gt;&lt;span&gt;2,2&lt;/span&gt;&lt;span&gt;2,3&lt;/span&gt;&lt;span&gt;2,4&lt;/span&gt;&lt;span&gt;2,5&lt;/span&gt;&lt;span&gt;2,6&lt;/span&gt;&lt;span&gt;2,7&lt;/span&gt;&lt;span&gt;2,8&lt;/span&gt;&lt;span&gt;2,9&lt;/span&gt;&lt;span&gt;3&lt;/span&gt;&lt;span&gt;3,1&lt;/span&gt;&lt;span&gt;3,2&lt;/span&gt;&lt;span&gt;3,3&lt;/span&gt;&lt;span&gt;3,4&lt;/span&gt;&lt;span&gt;3,5&lt;/span&gt;&lt;span&gt;3,6&lt;/span&gt;&lt;span&gt;3,7&lt;/span&gt;&lt;span&gt;3,8&lt;/span&gt;&lt;span&gt;3,9&lt;/span&gt;&lt;span&gt;4&lt;/span&gt;&lt;span&gt;4,1&lt;/span&gt;&lt;span&gt;4,2&lt;/span&gt;&lt;span&gt;4,3&lt;/span&gt;&lt;span&gt;4,4&lt;/span&gt;&lt;span&gt;4,5&lt;/span&gt;&lt;span&gt;4,6&lt;/span&gt;&lt;span&gt;4,7&lt;/span&gt;&lt;span&gt;4,8&lt;/span&gt;&lt;span&gt;4,9&lt;/span&gt;&lt;span&gt;5&lt;/span&gt;&lt;span&gt;5,1&lt;/span&gt;&lt;span&gt;5,2&lt;/span&gt;&lt;span&gt;5,3&lt;/span&gt;&lt;span&gt;5,4&lt;/span&gt;&lt;span&gt;5,5&lt;/span&gt;&lt;span&gt;5,6&lt;/span&gt;&lt;span&gt;5,7&lt;/span&gt;&lt;span&gt;5,8&lt;/span&gt;&lt;span&gt;5,9&lt;/span&gt;&lt;span&gt;6&lt;/span&gt;&lt;span&gt;6,1&lt;/span&gt;&lt;span&gt;6,2&lt;/span&gt;&lt;span&gt;6,3&lt;/span&gt;&lt;span&gt;6,4&lt;/span&gt;&lt;span&gt;6,5&lt;/span&gt;&lt;span&gt;6,6&lt;/span&gt;&lt;span&gt;6,7&lt;/span&gt;&lt;span&gt;6,8&lt;/span&gt;&lt;span&gt;6,9&lt;/span&gt;&lt;span&gt;7&lt;/span&gt;&lt;span&gt;7,1&lt;/span&gt;&lt;span&gt;7,2&lt;/span&gt;&lt;span&gt;7,3&lt;/span&gt;&lt;span&gt;7,4&lt;/span&gt;&lt;span&gt;7,5&lt;/span&gt;&lt;span&gt;7,6&lt;/span&gt;&lt;span&gt;7,7&lt;/span&gt;&lt;span&gt;7,8&lt;/span&gt;&lt;span&gt;7,9&lt;/span&gt;&lt;span&gt;8&lt;/span&gt;&lt;span&gt;8,1&lt;/span&gt;&lt;span&gt;8,2&lt;/span&gt;&lt;span&gt;8,3&lt;/span&gt;&lt;span&gt;8,4&lt;/span&gt;&lt;span&gt;8,5&lt;/span&gt;&lt;span&gt;8,6&lt;/span&gt;&lt;span&gt;8,7&lt;/span&gt;&lt;span&gt;8,8&lt;/span&gt;&lt;span&gt;8,9&lt;/span&gt;&lt;span&gt;9&lt;/span&gt;&lt;span&gt;9,1&lt;/span&gt;&lt;span&gt;9,2&lt;/span&gt;&lt;span&gt;9,3&lt;/span&gt;&lt;span&gt;9,4&lt;/span&gt;&lt;span&gt;9,5&lt;/span&gt;&lt;span&gt;9,6&lt;/span&gt;&lt;span&gt;9,7&lt;/span&gt;&lt;span&gt;9,8&lt;/span&gt;&lt;span&gt;9,9&lt;/span&gt;&lt;span&gt;10&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p><strong>JS</strong></p>

<pre><code>$evaluation = 8,5;
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
    $('.radial-progress').attr('data-progress', $evaluation*10);
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.radial-progress {
@circle-size: 120px;
@circle-background: #d6dadc;
@circle-color: #97a71d;
@inset-size: 90px;
@inset-color: #fbfbfb;
@transition-length: 1s;
@shadow: 6px 6px 10px rgba(0,0,0,0.2);
@percentage-color: #97a71d;
@percentage-font-size: 22px;
@percentage-text-width: 57px;

margin: 50px;
width:  @circle-size;
height: @circle-size;

background-color: @circle-background;
border-radius: 50%;
.circle {
    .mask, .fill, .shadow {
        width:    @circle-size;
        height:   @circle-size;
        position: absolute;
        border-radius: 50%;
    }
    .shadow {
        box-shadow: @shadow inset;
    }
    .mask, .fill {
        -webkit-backface-visibility: hidden;
        transition: -webkit-transform @transition-length;
        transition: -ms-transform @transition-length;
        transition: transform @transition-length;
        border-radius: 50%;
    }
    .mask {
        clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
        .fill {
            clip: rect(0px, @circle-size/2, @circle-size, 0px);
            background-color: @circle-color;
        }
    }
}
.inset {
    width:       @inset-size;
    height:      @inset-size;
    position:    absolute;
    margin-left: (@circle-size - @inset-size)/2;
    margin-top:  (@circle-size - @inset-size)/2;

    background-color: @inset-color;
    border-radius: 50%;
    box-shadow: @shadow;
    .percentage {
        height:   @percentage-font-size;
        width:    @percentage-text-width;
        overflow: hidden;

        position: absolute;
        top:      (@inset-size - @percentage-font-size) / 2;
        left:     (@inset-size - @percentage-text-width) / 2;

        line-height: 1;
        .numbers {
            margin-top: -@percentage-font-size;
            transition: width @transition-length;
            span {
                width:          @percentage-text-width;
                display:        inline-block;
                vertical-align: top;
                text-align:     center;
                font-weight:    800;
                font-size:      @percentage-font-size;
                color:          @percentage-color;
            }
        }
    }
}

@i: 0;
@increment: 180deg / 100;
.loop (@i) when (@i &lt;= 100) {
    &amp;[data-progress="@{i}"] {
        .circle {
            .mask.full, .fill {
                -webkit-transform: rotate(@increment * @i);
                -ms-transform: rotate(@increment * @i);
                transform: rotate(@increment * @i);
            }   
            .fill.fix {
                -webkit-transform: rotate(@increment * @i * 2);
                -ms-transform: rotate(@increment * @i * 2);
                transform: rotate(@increment * @i * 2);
            }
        }
        .inset .percentage .numbers {
            width: @i * @percentage-text-width + @percentage-text-width;
        }
    }
    .loop(@i + 1);
}
.loop(@i);
}
</code></pre>

<p>The problem is that I'm trying to embed this code in a php function that returns a <em>content</em> string.
So, every HTML in the function is a concatenation in the <em>content</em> string, like this:</p>

<pre><code>$content .= ' &lt;div class="etc....." ';
</code></pre>

<p>The page is correctly showed (no problem with script location and concatenation) but I receive the echo of the <em>span</em> content in <em>numbers</em> class.
The output is this:</p>

<pre><code>-00,10,20,30,40,50,60,70,80,911,11,21,31,41,51,61,71,81,922,12,22,32,42,52,62,72,82,933,13,23,33,43,53,63,73,83,944,14,24,34,44,54,64,74,84,955,15,25,35,45,55,65,75,85,966,16,26,36,46,56,66,76,86,977,17,27,37,47,57,67,77,87,988,18,28,38,48,58,68,78,88,999,19,29,39,49,59,69,79,89,910
</code></pre>

<p>I think that the javascript function is incompatible with the HTML contained in a string.</p>