I tried to print my output based on the index by making a variable named "todo_index" and then assign it +1 after looping once but somehow it wont add 1:

My code:


<apex:page id="page" standardcontroller="Task" extensions="calloutViewer_Controller" >
    <style>
        .account{
            font-weight: bold;
        }
       a{
           color: #FF0000;
        }
    
    </style>
    <apex:form id="form" >
        <apex:sectionHeader title="Salesforce - Test " />
        <apex:pageMessages id="pageMessages" />
        <apex:pageBlock >
            <apex:pageBlockSection columns="2" title="Salesforce - Todo Parser" collapsible="False">
                <apex:pageBlockSectionItem >
                    <apex:outputPanel >
                        <div style="text-align:center;font-size: 13px;" class="account">
                            <apex:outputLabel value="Todo text" styleClass="account" />
                        </div>
                        &nbsp;<apex:inputTextarea style="width:100%;height:75px;" label="Left Side" value="{!requestBody}" id="theTextInput"  />&nbsp;
                        <div align="center">
                            <apex:commandButton value="Submit" action="{!deserializedd}" style=""/>
                        </div>
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
                    <apex:pageBlockSectionItem >
                        <apex:outputPanel style="width:100%;height:100% ">
                        <div style="text-align: center;font-size: 13px;" class="account">
                            <apex:outputLabel value=" . " styleClass="account" />
                        </div>
                            <apex:variable var="todo_index" value="{!0}" />
                                &nbsp;<apex:pageBlockTable value="{!sentence}" var="var">
                                    <apex:column headerValue="ToDo">
                                        <apex:repeat value="{!IF ((todo_index < listtodocombined.size), listtodocombined[todo_index], "None")}" var="tc">
                                        <apex:selectCheckboxes value="{!subj}">
                                            <apex:selectOption itemValue="{!tc}" itemlabel="{!tc}"/>
                                            <apex:actionSupport event="onchange" action="{!taskInsert}" reRender="test" />
                                        </apex:selectCheckboxes>
                                        </apex:repeat>
                                    </apex:column>
                                </apex:pageBlockTable>&nbsp;
                            <apex:variable var="todo_index" value="{!todo_index + 1}"     />
                                <div align="center">
                                    <apex:commandButton value="Add Task" action="{!showPopup}" reRender="calloutViewer_Controller" />
                                </div>
                        </apex:outputPanel>
                    </apex:pageBlockSectionItem>
            </apex:pageBlockSection> 
        </apex:pageBlock>
        
        <apex:variable var="total_index" value="{!0}" />
        <apex:outputPanel id="calloutViewer_Controller">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                <apex:repeat value="{!IF((total_index < listtodotemp.size),listtodotemp[total_index], "None")}" var= "td" >
                    <apex:repeat value="{!IF((total_index < listtodogoals.size),listtodogoals[total_index], "None")}" var="tg">
                    <br /><div align="center" style="text-align:center;font-size: 13px;" class="account">
                    Todo Description <br />
                    </div>
                    Subject : {!td} <br /> 
                    Time : {!total_index} <br />
                    Place : <br />
                    Action : {!tg} <br /><br />
                    <apex:commandButton value="Edit" action="{!editing}" reRender="calloutViewer_Controller" />
                    </apex:repeat>
                </apex:repeat>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="calloutViewer_Controller"/>
            </apex:outputPanel>
        </apex:outputPanel>
        <apex:variable var="total_index" value="{!todo_index + 1}"     />
    </apex:form>
    
    
    <style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup 
            displays in the center of the screen. First set the width. Then set 
            margin-left to negative half of what the width is. You can add 
            the height property for a fixed size pop up if you want.*/
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
    
</apex:page>