I'm having issue with adding active element and removing it onclick action.
I'm taking li and a items from cms by smarty, in html it's someghing like this:

```
<li class="arrow-right text-center">Lorem Ipsum</li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>
<li><a href="something"></a></li>

```

I'm setting first element active by jQuery and trying to remove it by .click function , after i click i have first and clicked element active only to refresh , after page refresh only first element is active
sample: 

```
$(".list-group-item:first").addClass("active");
$(document).ready(function(){
    $(".list-group-item:first").addClass("active");
    $('.list-group-item').click(function() {
        $(".list-group-item:first").removeClass("active");
        $(this).siblings('li').removeClass('active');
        $(this).addClass('active');
    });
});

```

I'm 100% sure that problem is first line of code because it's repeating always with document.ready function. I'm asking because I'm not expert and don't know how to check that first element was active and how to make it active after i go back to that li element after few clicks. 

I tried 

```
$(".list-group-item").click(function() {
    $(this).parent().addClass('active').siblings().removeClass('active');
});

```

It's not working