Displaying item other than key with groupby foreach loop c# asp.net mvc

Question

I am currently using groupby with a foreach loop to show a list of nested records.

However I want to us an id as the key, so that I can use it to make dynamic css selectors etc..

But I want to be able to show the name of each of the groups before the secondarly loop is iterated through.

I think the code will make it more clear.

Basically it would be great if I could access properties other than group.key before the second loop starts.

I know I could limit the iterations of the title loop, but it feels very wrong

   <ul id="GoalAndTaskList">
   <% foreach (var group in Model.GroupBy(item => item.goalId)) { %>

   <li>

   /////This code is just to display the name, but it iterates 
   /////through the whole group, so the title is rendered many times

   <% foreach (var item in group)
   { %>
   <%= Html.Encode(item.goalName) %>   
   <% } %>

   ///////// Before this I was using group.key , which meant an Id was the title
   /////////

   <table id="taskTable<%= Html.Encode(group.Key) %>">
   <% foreach (var item in group) { %>

   <tr id="<%= Html.Encode(item.sortOrder) %>">
   <td class="dragHandle">&nbsp;</td>
   <td><%= Html.Encode(item.sortOrder) %></td>
   <td>
   <input type="text" name="<%= Html.Encode(item.taskId) %>" value="<%=Html.Encode(item.taskName) %>"/>       
   </td>
   <td>
   <a id="DeleteTask<%= Html.Encode(item.taskId) %>">Delete Task</a>
   </td>       
   </tr>  
   <% } %>    
   </table>
   <br /><a id="AddNew2<%= Html.Encode(group.Key) %>">Add new task</a><br /><br />    
   </li>
   <% } %>
   </ul>

Answer 1

What I did was this

<% foreach (var item in group.Take(1))
  { %>
  <%= Html.Encode(item.goalName) %>   
 <% } %>

It feels really wrong though to do it like this, can anyone suggest a cleaner way of doing this?