Jquery don't pass correct value to html
===

In my code it's like a for loop for count and countin variables .. in last loop every thing is okay and it return correct value but it can't return last values .

what is the problem ?

this is my code : 

    @{
        int count = 1;
        int countin = 110;
        }

    @foreach (var item in Model) {
        
    <script>
        obj = {};
        obj[@count] = Math.round(@Html.DisplayFor(modelItem => item.ProgressPercent) * 268 / 100);
    
        var objin = {};
        objin[@count] = "-" + obj[@count] + "px 0";
    
        var jq3 = jQuery.noConflict();
        jq3(document).ready(function () {
    
            jq3("#bar-pro-@count").css({ "background-position": objin[@count] });
    
            if (obj[@count] == 100) {
                jq3("#bar-pro-@count").css({ "background-image": "none" });
                jq3("#bar-pro-@countin").css({ "background-image": "none" });
            };
    
        });
    </script>
        
    <div class="bar-t"><b>@Html.DisplayFor(modelItem => item.Name) | در مرحله : @Html.DisplayFor(modelItem => item.Phase)</b></div>
    <div class="bar-100">
    <div class="bar" id="bar-pro-@countin">
    </div>
    <div class="bar-pro" id="bar-pro-@count"></div>
    <div class="bar-num"><script> document.write(@Html.DisplayFor(modelItem => item.ProgressPercent) + "%");</script></div>
    </div>
        count = count + 1;
        countin = countin + 10;
    }

and after rendering in HTML : 

    <script>
        obj = {};
        obj[1] = Math.round(12 * 268 / 100);    
        var objin = {};    
        objin[1] = "-" + obj[1] + "px 0";
        var jq3 = jQuery.noConflict();    
        jq3(document).ready(function () {
            jq3("#bar-pro-1").css({ "background-position": objin[1] });
            if (objin[1] == 100) {
                jq3("#bar-pro-1").css({ "background-image": "none" });
                jq3("#bar-pro-110").css({ "background-image": "none" });
            };
        });
    
    </script>
    <div class="bar-t"><b>Progress</b></div>
    <div class="bar-100">
    <div class="bar" id="bar-pro-110">
    </div>
    <div class="bar-pro" id="bar-pro-1"></div>
    <div class="bar-num"><script> document.write(12 + "%");</script></div>
    </div>


this is just one of loops . if you want I can put full code and result . 
NOTE : last value is correct and it applied to css but past values for css don't work .

what is the problem ?