Change the style of a 'li' (item of a list) dynamically

Hello,

I am developing an asp.net application in which i am filling a ul object dynamically:

<div id="navcontainer">
                        <ul id="navlist" runat="server">
                        </ul>
                    </div>

Code (markup):

foreach (string groupName in dict.Keys)
{
  navlist.InnerHtml += "<li style='float:none'><a href='#' id='link1'  target='main' onclick='selectGroup(" + counter + ")'>" + groupName + "</a></li>";

   counter++;
}
navlist.DataBind();

Code (markup):

I need to change its style dynamically (onClick) and i am trying to use javascript for that:

<script language="javascript" type="text/javascript">
function selectGroup(selectedGroupIndex)
{
  var items = document.getElementById("navlist").getElementsByTagName('li');
                for(var i=0; i < items.length; i++)
                {
                   if(i == selectedGroupIndex)
                   {
                      items[i].className = "selected";
                      selectedGroup = items[i].innerText;
                   }
                   else
                   {
                      items[i].className = "notSelected";
                   }
                }
}
 </script>

Code (markup):

Unfortunately, that doesn't work...
What should I change?

 

Put an id property of each LI element when populate them.
Then if(i == selectedGroupIndex) must be if(i.id == selectedGroupIndex)