Dynamically creating jquery tab in razor mvc4

Question

I have scenario where i am using jquery tab and i want to build it dynamically on the basis of logic behind razor page. below is my code for razor page asp.net mvc4. so in below code i need to create tabs dynamically on the basis of number of groups in loop. so let say i have 10 groups in Model.Group it should loop through it and create 10 different tabs and also the content for each tab(Group). One group/tab can have any of the control e.g. radio, checkbox, text input on the basis of below logic.

View

@model Orchard.Club.ViewModels.SignupViewModel


<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Membership Info</a></li>          
  </ul>

  <div id="tabs-1">
  @foreach (var groups in Model.Groups)
          {

              if (Model.CustomControls.Where(r => r.Group == groups.GroupTitle).Count() > 0)
              {                                              
                    <label style="font-weight:bold">@groups.GroupTitle</label>

                    <div style=" border: 1px solid #CCCCCC;padding:5px">

                    @foreach (var row in Model.CustomControls.Where(r => r.Group == groups.GroupTitle))
                    {
                        <div style="padding:7px">

                             @if (row.ControlType == "Single Line Text")
                             {
                                <label>@row.Caption</label>
                                <input type="text" value="@row.Value" disabled/>
                             }
                             else if (row.ControlType == "Multi Line Text")
                             {
                                 <label>@row.Caption</label>
                                 <textarea disabled>@row.Value</textarea>
                             }
                             else if (row.ControlType == "Yes/No Choice(Radio Buttons)")
                             {
                                 if (row.Value == "No")
                                 {
                                    <div>     
                                        <label>@row.Caption</label>
                                        &nbsp                     
                                        <input type="radio" value="Yes" disabled/> &nbsp Yes
                                        &nbsp
                                        <input type="radio" checked="checked" value="No" disabled/> &nbsp No
                                    </div>
                                 }
                                 else
                                 {

                                    <div>     
                                        <label>@row.Caption</label>
                                        &nbsp                     
                                        <input type="radio" value="Yes" checked="checked" disabled/> &nbsp Yes
                                        &nbsp
                                        <input type="radio" value="No" disabled/> &nbsp No
                                    </div>

                                 }

                             }
                             else if (row.ControlType == "Checkbox")
                             {
                                 <div>
                                    <input type="checkbox" checked="@row.Value" disabled/> @row.Caption
                                 </div>
                             }
                        </div>                        
                    }                            
                    </div>

                <br />
              }
          }
 </div>
</div>   


@using (Script.Foot())
{     
<script type="text/javascript">

    $(function () {
        $("#tabs").tabs();
    }); 

</script>    
}

Answer 1

<div id="tabs">
    <ul>
    for(var i + 1;i<=Model.Groups.Count();++i)
    {    
        <li><a href="#tabs-@i">Nunc tincidunt</a></li>
    }
    </ul>
</div>

    for(var i + 1;i<=Model.Groups.Count();++i)
    {    
        <div id="tabs-@i>
              //Place your content here accessing Model.Groups.ElementAt(i)
        </div>
    }


@using (Script.Foot())
{     
<script type="text/javascript">

    $(function () {
        $("#tabs").tabs();
    }); 

</script>    
}