title: Unable to Change css on new ajax call
body: <p>here is my html</p>
  
  <pre><code>&lt;div id="tabs" &gt;
                &lt;ul class="cat-head"&gt;
                &lt;li&gt;All&lt;/li&gt;
                {% for category in brandcategory %}
                &lt;li id="cat{{category.id}}" onclick="sendBrandCategory(event, {{category.id}})"&gt;{{category}}&lt;/li&gt;
                {% endfor %}
                &lt;/ul&gt;    
            &lt;/div&gt;
  </code></pre>
  
  <p>and here is the ajax script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    function sendBrandCategory(event, category) {
            var data = { category : category , action:'inventory'};
            $.ajax({        
                type: "GET",
                url: "{% url 'storeView'  user=store.user %}",
                data: data,
                success: function(data) {
                    var thumb = $(data).find('#brand');
                    $('#brand').html(thumb);  
                    $('#cat'+ category).css({'background-color':'black'});  
                  },
                error: function(response, error) {
                    alert(error);  
                }
            });
        }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>On ajax success i am able to set the first li element css but on clicking the second li element the first element css still remains on the page.I want one li element to have background color on ajax success at a time.how can i achieve this.thank you</p>