Separate are 10 buttons that set a variable x to the corresponding number; press button 4 and x = 4.

What I'd like to do is change the colour of the svg shapes, less than and including 4 turn blue, five and above turn grey. 

Within a function, this works but isn't what I want. I'd like to replace the numbers in brackets, e.g 4 and 5 in the example below with whatever the value of x is but putting in x doesn't work.

I'm new to JS and JQ so no doubt I'm missing something obvious. 

1. function changeColours() {
       $(".st1:gt(4)").css("fill","grey");
       $(".st1:lt(5)").css("fill","blue");
   });