I am having trouble creating a percentage bar using jquery and css. The code I have written is not working as expected, particularly the use of jquery css({}). Here is the code snippet:
*'width' : width - seems to be causing issues for me
//vote percentage
$('.vote-percent').each(function() {
var percentValue = $(this).find('.percent-num').text();
$(this).find('.percent-bar').attr('data-percentage', percentValue);
var width = $(this).find('.percent-bar').attr('data-percentage');
$(this).find('.percent-bar').css({
'width': width
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vote-percent flx justify-items-r">
<span class="percent-num">65%</span>
<div class="percent-bar"></div>
</div>
<div class="vote-percent flx justify-items-r">
<span class="percent-num">25%</span>
<div class="percent-bar"></div>
</div>
<div class="vote-percent flx justify-items-r">
<span class="percent-num">10%</span>
<div class="percent-bar"></div>
</div>