I have a dropdown menu and some buttons below in my HTML:

Code:
<p>
    <select name="numberDrop" id="numberDropId" onClick="getButtons()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </p>

    <p>
    <input class="answerBtns" name="answerA" type="button" value="A" />
    <input class="answerBtns" name="answerB" type="button" value="B" />
    <input class="answerBtns" name="answerC" type="button" value="C" />
    <input class="answerBtns" name="answerD" type="button" value="D" />
    <input class="answerBtns" name="answerE" type="button" value="E" />
    </p>
What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu?


For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert.

Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected?

Thank You