Having trouble displaying each loop result on different objects

Question

Hi I was trying to create a jquery script where I can generate and add a class id by combining the current class plus the iterated result on the each function of jquery now the problem is the it does add the current class plus the number but the result looks like this

Which I had in mind was something like this

   <a><p class="lbls chs0">1000</p></a>
   <a><p class="lbls chs1">4000</p></a>
   <a><p class="lbls chs2">6000</p></a>

is this possible?

This is what i have tried so far

  $(document).ready(function(){
        $("#qs").find(".chs").each(function(i,obj){
             $(".chs").addClass("chs"+i);
        });

  });

I'm new to jquery so I dont have that much knowledge on jquery any help would be appreciated

Answer 1

Try to using this instead of $(".chs")

$("#qs").find(".chs").each(function(i,obj){
      $(this).removeClass("chs");  //Remove class .chs
      $(this).addClass("chs"+i);  //Add new class .chs+i
});

Demo