title: JS: How to trigger CSS changes on divs based on API information
body: <p>I'm working on a project in which I need to record the number of pages that a person has completed in an online journal. For that, I use JavaScript/jQuery to make an API call, then use the data from the call to style a few divs based on which pages have been completed.</p>
  
  <pre><code>Here's an example of the API I'm using:
  [ {
  "userId": 1,
  "pagesCompleted": 10 },
  {
  "userId": 2,
  "pagesCompleted": 8 },
  {
  "userId": 3,
  "pagesCompleted": 5 }
  ]
  </code></pre>
  
  <p>I have to write a function that calls the API, goes through the users, and styles divs based on how many pages have been completed out of 10.</p>
  
  <p>Here's the html I'm working with</p>
  
  <pre><code>&lt;div class="pagesFinished"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>Here's my JS page</p>
  
  <pre><code>function getJournal(userId) {
  $.ajax({
          url: apiSource + "journal/users",
          dataType: "json"
      }).done(function(data) {
  
  for (let i = 0 ; i &lt; dataLength; i++) {
  
  let buttonArray =(&lt;button id="one"&gt;Page 1&lt;/button&gt;&lt;button id="two"&gt;Page 2&lt;/button&gt;&lt;button id="three"&gt;Page 3&lt;/button&gt;&lt;button id="four"&gt;Page 4&lt;/button&gt;&lt;button id="four"&gt;Page 4&lt;/button&gt;&lt;button id="five"&gt;Page 5&lt;/button&gt;&lt;button id="six"&gt;Page 6&lt;/button&gt;&lt;button id="seven"&gt;Page 7&lt;/button&gt;&lt;button id="eight"&gt;Page 8&lt;/button&gt;&lt;button id="nine"&gt;Page 9&lt;/button&gt;&lt;button id="ten"&gt;Page 10 &lt;/button&gt;)
  
  $(".pagesFinished").append(buttonArray);
  </code></pre>
  
  <p>Here's where I need to find a way to loop through the userIdArray, figure out how which pages the users have reached, the style the divs accordingly. If a user had read a particular page, the buttons should appear red.</p>
  
  <p>I did something like :</p>
  
  <pre><code>let lastPageCompleted = data[i].lastPageCompleted; //should be 10, 8, 5
  $("#page" + lastPageCompleted).css('background-color', 'red');
  </code></pre>
  
  <p>But that only makes the last button red, (aka the 10th, 8th, and 5th buttons). I need all of the buttons that precede them to turn red as well. How can I write a loop that goes backwards and applies the css change?</p>