Can't write razor variable inside HTML ID/Clas

Question

I've been trying to improve my MVC website (it uses the GMAPS API) by creating a button (avoid tolls) to update travel distances. The idea is the following

Before pressing the button: Lisbon-Madrid: 500km in 4h30 Madrid-Paris: 1000 km in 9h15

After pressing the button: Lisbon-Madrid: 550km in 6:50 Madrid-Paris: 1100km in 13:55

In order to do so I wrote the following code:

Before clicking the button:

<div id="collapse2" style="display:none">
@{
   TripData ThisTripData = new TripData();//A structure created inside @functions{}
   ThisTripData = GetDistanceAndTime(false);

   int MyLength = ThisTripData.HoursList.Count();
   for (int j = 0; j < MyLength; j++) {
      if (Model.ElementAt(j).Trip == Model.ElementAt(j + 1).Trip) {
         <p></p>
         <span id="A@(j)">@ThisTripData.DistanceList.ElementAt(j)</span> <span> Km in </span> <span id="B@(j)">@ThisTripData.HoursList.ElementAt(j)</span><span>:</span><span id="C@(j)">@ThisTripData.MinutesList.ElementAt(j).ToString("00")</span><span> h </span>
       }
   }
}
</div>

The idea was to update these 'id's by pressing the "avoid tolls" button. As you can see I've just created multiple ID's: A0, B0, C0, A1, B1, C1, etc...

After clicking the button (javascript):

@{
   TripData ThisTripData3 = new TripData(); //A structure created inside @functions{}
   ThisTripData3 = GetDistanceAndTime(true);
}

for (var i=0;i<@(ThisTripData3.HoursList.Count());i++) {
   if (i==0) {
      $('#A0').text('@ThisTripData3.DistanceList[0].ToString("00")');
      $('#B0').text('@ThisTripData3.HoursList[0].ToString("00")');
      $('#C0').text('@ThisTripData3.MinutesList[0].ToString("00")');
   }
   if (i==1) {
      $('#A1').text('@ThisTripData3.DistanceList[1].ToString("00")');
      $('#B1').text('@ThisTripData3.HoursList[1].ToString("00")');
      $('#C1').text('@ThisTripData3.MinutesList[1].ToString("00")');
   }
   if (i==2) {
      $('#A2').text('@ThisTripData3.DistanceList[2].ToString("00")');
      $('#B2').text('@ThisTripData3.HoursList[2].ToString("00")');
      $('#C2').text('@ThisTripData3.MinutesList[2].ToString("00")');
   }
}

My Problems using this solution:

1) I can only get a good result when I have exactly 3 trips. When I have 2 trips the browser sends me an "index out of range" error on the first line after . Apparently the browser checks for the razor variables value before it computes wether it will actually pass that line or not.

2) I can't make a 'for loop' to avoid creating these 3 annoying if's... The reason why is that I can't use the 'i' javascript variable inside razor.

I want to state that I'm probably mixing server-side (Razor) and client-side (javascript). I am also aware that instead of creating the ThisTripData structure inside @functions I should have created instead a model in Models. However, I really can't understand how this would help me. Even using the @Model I would still be forced to mix javascript and razor so that I could use something like $('#A2').text(). Right?

Update: I'm trying to ask it in a simpler way in the following stackoverflow Post