Код JQuery не отображает правильные значения на моей диаграмме ⇐ Jquery

[Anonymous]

Я что-то застрял и был бы очень признателен, если бы кто-нибудь мог мне помочь.
Я строю простую диаграмму/график, используя HTML и JQuery.
У меня есть следующий код:

Код: Выделить всё

$(document).ready(function() {
$(".graph-box .value").each(function() {
var num = $(this).html()
var iNum = parseInt(num);
var eq= $(this).index();
var finalSum = (iNum/1000);
alert (finalSum);
$(".graph-bar").width (finalSum + "%");
});
});



* {padding:0; margin:0;}
.graph-box {border:1px solid #ccc; box-shadow:3px 3px 3px #ccc;}
.entry {display:flex;}
.name {width:500px; background-color:#ccc;}
.graph-bar {box-sizing:border-box; background-color:#ff0000; color:#fff; border-bottom:1px solid #ccc; border:1px solid blue; height:30px;}





England
817



Scotland
500



Wales
250

Как вы, вероятно, видите, JQuery проверяет элемент div .value и записывает его содержимое. Затем он преобразует его в целое число. Я знаю, что эта часть правильна и работает, когда я добавляю предупреждение. При запуске она дает мне 3 правильных значения.
Что затем нужно сделать, так это найти элемент div с именем 'graph-bar' и установить ширина этого div в соответствии с созданным им целым числом. Однако, когда я запускаю код, все столбцы имеют одинаковую ширину.
У меня этот код работал хорошо, когда все целые числа находились в одном блоке, поэтому я подозреваю, что это это как-то связано с кодом 'eq'?
Если бы кто-нибудь мог сообщить мне, как это исправить и, что особенно важно, почему, я мог бы знать на будущее и избежать этой проблемы снова.
Благодарю любую помощь, которую кто-то может мне оказать!

Подробнее здесь: https://stackoverflow.com/questions/792 ... o-my-chart