JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dot/1.0.3/doT.min.js"></script>
<header class="col-xs-12">
    <h1>Gadget Poll Result Totals</h1>
    <p>From the <a href="http://forum.audiob.us/discussion/9211/vote-for-the-official-ab-big-three-improvements-to-gadget-to-take-to-korg">AudioBus Forum</a></p>
    <p>Compiling totals from across the three questions. This does not weight for the order chosen (priority 1 vs priority 3, for example).</p>
    </header>
<div id="totals" class="col-xs-12"></div>
<script id="resultTemplate"  type="text/x-dot-template">
    <dt> {{=it.title}} </dt>
    <dd>
        <span class="{{=it.vanillaStyle}}" style="width: {{=it.avg}}%">
	       &nbsp;
        </span>
        <span class="total"> {{=it.avg}}%</span>
    </dd>
    <dd class="votes">Poll totals: {{=it.votes.join('%, ')}}%</dd>
</script>


<h2>Original Poll HTML</h2>
<!-- 
----------------------------------------------------
----------------------------------------------------
        Paste updated OL vote HTML below:
----------------------------------------------------
---------------------------------------------------- 
-->


<ol class="DP_ResultQuestions">
<li class="DP_ResultQuestion">
<span>Please choose 1</span><span class="Number DP_VoteCount">108 votes</span> <ol class="DP_ResultOptions">
<div>Multiple FX options for each and every channel (EQ, Compression, filter, delay etc. 3rd party?)</div> <span class="DP_Bar DP_Bar-2" style="width: 25.93%">25.93%</span>
<li class="DP_ResultOption"></li><div>Playable keyboard sampler Gadget</div> <span class="DP_Bar DP_Bar-3" style="width: 8.33%">&nbsp;</span>
8.33%<li class="DP_ResultOption"></li><div>Arrangement improvements (naming tracks, scenes, colour coding, loop points, linear options)</div> <span class="DP_Bar DP_Bar-4" style="width: 4.63%">&nbsp;</span>
4.63%<li class="DP_ResultOption"></li><div>Audio tracks or at...

SCSS

dt {
    margin-top: 10px;
}
dd.votes {
    font-size: 80%;
}
dd:not(.votes) {
    background-color: #e4e4e4;
}

h2 {
    clear: both;
    padding: 50px 15px 0 15px;
}
span+span {
    font-size: 1.1em;
    padding-left: 20px;
}

/* from vanilla.css */
.DP_Bar {
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    font-size: 1.3em;
    padding: 5px 0;
}
.DP_Bar-9 {
    background-color: #37c88c;
    color: #000000;
}
.DP_Bar-8 {
    background-color: #ff2af6;
    color: #000000;
}
.DP_Bar-7 {
    background-color: #5f6fd3;
    color: #000000;
}
.DP_Bar-6 {
    background-color: #c8ae37;
    color: #000000;
}
.DP_Bar-5 {
    background-color: #ff2a2a;
    color: #000000;
}
.DP_Bar-4 {
    background-color: #379ec8;
    color: #000000;
}
.DP_Bar-3 {
    background-color: #dfff2a;
    color: #000000;
}
.DP_Bar-2 {
    background-color: #8d5fd3;
    color: #5f1e00;
}
.DP_Bar-1 {
    background-color: #71c837;
    color: #000000;
}

JavaScript

console.clear();

var subtotal = 0, 
    grandTotal = 0,
    totalAverages = 0,
    vote, 
    markdown = "",
    result = {};
    results = [],
    resultTemplate = doT.template(document.getElementById('resultTemplate').text);

// 14 questions
for (var i = 0; i < 15; i++) {

    // Reset it all
    result = {};
    result.votes = [];
    
    // Three different meta questions
    $('.DP_ResultQuestion').each(function(index, item){
        // Find the sub-question, er, in question
        vote = $(this).find('.DP_Bar').eq(i);
        
        // The Vanilla HTML is horrible. Base it off the style it created instead.
        subtotal = parseFloat(vote[0].style.width);

        result.title = vote.prev('div').text();
        
        // Store each result from each of the three questions
        result.votes.push(subtotal);            
    });
    
    // Add the result into the global results array
    results.push(result);
    
    /*
    // Debugging
    console.info(result.title);
    console.log("Each vote: " + result.votes.join(', ') );
    console.log( (total/3).toFixed(2) );
    */
    
    // Because, Math
    result.total = result.votes.reduce(function(a, b) { return a + b; })    
    result.avg = (result.total/3).toFixed(2);


    // Coping classnames/styles from the vanilla forum in case the output HTML reposted there.
    // Don't think vanilla will allow it but just in case
    result.vanillaStyle = i < 10 ? 'DP_Bar DP_Bar-'+i : 'DP_Bar DP_Bar-'+(i-10);
    
    // Build the html for this result
    result.html = resultTemplate(result);
    
    // Check the math: should be more or less 300 at the end.
    // 100% * 3 questions + slight rounding errors on the Vanilla side.
    grandTotal = grandTotal + result.total;
    // should be ~100
    totalAverages =  totalAverages + parseFloat(result.avg);

}

// Put the results in order by most votes
results.sort(function(a, b) {
    return a.total - b.total;
});

results.reverse();    
  ...