[SalesForce] Dynamically assign div IDs

I need a method of dynamically assigning DIV Ids to each tile as they are created. The Id's should be a combination of a letter and a number. (A1, B6, D5) Could anyone offer me some advice on how to accomplish this?

enter image description here

VF Page

<apex:form >
        <apex:pageBlock >

            <table id="board">
                <thead>
                    <tr class="boardNumbers">
                        <th></th>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                        <th>5</th>
                        <th>6</th>
                        <th>7</th>
                        <th>8</th>
                    </tr>
                </thead>
                <tbody>
                    <apex:variable var="index" value="{!0}"/>
                    <apex:variable var="letterIndex" value="{!0}"/>

                    <apex:repeat value="{!cells}" var="gc">
                        <tr>
                            <th class="boardLetters">{!letters[letterIndex]}</th>                          
                            <apex:repeat value="{!cells}" var="gp">
                                <td style="background-color: {!IF(MOD(index,2)==0, '#191919', '#A73131')}">
                                    <apex:variable var="index" value="{!index+1}"/>                                   
                                    <div class="tiles">
                                    </div>
                                </td>       
                            </apex:repeat>
                            <apex:variable var="index" value="{!index-1}"/>
                        </tr>     
                        <apex:variable var="letterIndex" value="{!letterIndex+1}"/>
                    </apex:repeat>
                </tbody>
            </table>



        </apex:pageBlock>
    </apex:form>

Controller Code

public class Checkers_Controller 
{
    public List<Integer> cells {get;set;}
    public List<String> letters {get;set;}

    public void init()
    {
        cells = new List<Integer>{1,2,3,4,5,6,7,8};
        letters = new List<String>{'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'};
    }
}

Best Answer

Yes you can use merge fields and it will work

<apex:repeat value="{!cells}" var="gc">
                    <tr>
                        <th class="boardLetters">{!letters[letterIndex]}</th>                          
                        <apex:repeat value="{!letters}" var="gp">
                            <td style="background-color: {!IF(MOD(index,2)==0, '#191919', '#A73131')}">
                                <apex:variable var="index" value="{!index+1}"/>                                   
                                <div class="tiles" id="{!gp}{!gc}">
                                </div>
                            </td>       
                        </apex:repeat>
                        <apex:variable var="index" value="{!index-1}"/>
                    </tr>     
                    <apex:variable var="letterIndex" value="{!letterIndex+1}"/>
                </apex:repeat>

If you also need index ,try using maps in visualforce

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_dynamic_vf_maps_lists.htm