I am trying to add a class to an li ID but .addClass isn't working in the current situation:


$j(document).ready(function () { 
$j("#ATT").click(function() {
      $j("ul#carrier li#attA").addClass("active");
(Using noConflict because I am doing this in a Wordpress page)

HTML Code:
<ul id="carrier">
<li id="attA">
<form method="post">
<input type="hidden" name="carrier" value="" id="carrier"> 
<a href="javascript:get_carrier('ATT');"><img src="/img/carrier-att.png" id="ATT" alt="AT&T" width="140" height="40"></a>
<li id="verizonA"><a href="javascript:get_carrier('Verizon');"><img src="/img/carrier-verizon.png" id="Verizon" alt="Verizon" width="140" height="40"></a></li>
<li id="sprintA"><a href="javascript:get_carrier('Sprint');"><img src="/img/carrier-sprint.png" id="Sprint" alt="Sprint" width="140" height="40"></a></li>
.active { border:3px solid rgba(39, 166, 255, 0.6); }
I also tried using

$j("ul#carrier li#attA").closest("li").addClass("active");
But didn't have any luck.

Here is what I am trying to achieve; when the user clicks the image (#ATT) I want the li to have a border around it (hence the .active class). I can easily achieve this using .css but when the user clicks another option (e.g #Sprint) I want to remove the style from whatever they chose last and have it only on the option they just clicked. That's why I'm trying to use .addClass, so I can use .removeClass when they select a different option.