I have a list and each LI element have a button.
Also when click(tap) the button, adding the class "on".

So this is my code here 

```
<ul>
<li><a href="#" class="btn">txt 1</li>
<li><a href="#" class="btn">txt 2</li>
<li><a href="#" class="btn">txt 3</li>
</ul>

<style>
.btn { background:blue }
.btn.on { background:red }
</style>

<script>
 $(document).on('vmousedown','.btn' ,function(){
        $(".btn").addClass('on');
    }).on('vmouseup', function(){
        $(".btn").removeClass('on');
    }).on("vmousecancel", function() {
        $(".btn").removeClass('on');
     });
</script>

```

The problem is when I press button on `Txt1`, All buttons adding class "on".

I want to add a class only the one that i clicked. 

How do i fix this script?