Dodawanie atrybutu data-id w pętli

Cześć,

Mam taki problem, chcę ustawić atrybut data-id z odpowiednimi numerami od od 1 do 3 dla tych elementów:

<button class="changeBar bar1" >Change progress bar number 1 to 50% blue</button><br>
<button class="changeBar bar1" >Change progress bar number 1 to 20% green</button><br>
<button class="changeBar bar1" >Change progress bar number 1 to 90% orange</button><br>

W pętli nie mogę tego zrobić(albo robię źle), bo dostaję błąd "buttonOne[i].attr is not a function":

var buttonOne = $('.bar1');

    for(var i = 0; i < buttonOne.length; i++){
      buttonOne[i].attr('data-id',i);
    }

Nie rozumiem też dlaczego próba dodania atrybutu data poprzez funkcję data() (np. buttonOne.data('id',1)) nie działa.
Nie dostaję żadnego błędu w konsoli, a atrybut nie jest przypisany mimo to.
Gdzie robię błąd?

Odpowiedź znajdziesz w dokumentacji: https://api.jquery.com/get/

tl;dr: odwoływanie się do obiektów jQuery poprzez [indeks] zwraca obiekty DOM - mówiąc inaczej, natywne przeglądarkowe obiekty, a nie wrappery jQuery. Żeby móc użyć .attr(), musisz zrobić $(buttonOne[i]).

razelll napisał(a):

W pętli nie mogę tego zrobić(albo robię źle), bo dostaję błąd "buttonOne[i].attr is not a function":

buttonOne.eq(numer) robi to, co chcesz osiągnąć pisząc buttonOne[numer].