Javascript if statement; always calling first else if statement

I cannot seem to get my code to work. Regardless of the returned integer, my code seems to call my first else if statement.

Included is my if statement. I tried to place all of my code into the snippet area but it doesn't seem to run properly.

Javascript:

  function getUVIndex(lat, lon) {
$.ajax({
  method: "GET",
  url: "http://api.openweathermap.org/data/2.5/uvi?lat=" + lat + "&lon=" + lon + "&units=imperial&appid=aa4b8fd43ea8bc685207d57d98c4ad7d",
  success: function(data) {
    var uv = $("<p>").text("UV Index: ");
    var btn = $("<span>").addClass("btn btn-sm").text(data.value);

    // change color depending on uv value
    if (data.value < 2) {
      var btn = $("<span>").addClass("btn btn-sm greenbtn").text(data.value);
    } else if (2 <= data.value < 5) {
      var btn = $("<span>").addClass("btn btn-sm yellowbtn").text(data.value);
    } else if (5 <= data.value < 7) {
      var btn = $("<span>").addClass("btn btn-sm orangebtn").text(data.value);
    } else if (7 <= data.value < 10) {
      var btn = $("<span>").addClass("btn btn-sm redbtn").text(data.value);
    } else if (10 <= data.value) {
      var btn = $("<span>").addClass("btn btn-sm violetbtn").text(data.value);
    }
    
    $("#today .UVbutton").append(uv.append(btn));
    console.log(data.value);
  } 
});}

The code runs, and the button that is being called on always shows as yellow. I feel like this is a simple misunderstanding, however I cannot figure it out myself. Any help would be appreciated.