Javascript-форум - Определение "Больше" или "Меньше" после нажатия кнопки

Здравствуйте.

Буду глубоко благодарен, если кто-то поможет/подскажет/направит в нужное русло с реализацией следующей задачи.

Есть три кнопки:

1. "Больше 50"
2. "Меньше 50"
3. "Играть"

Есть генератор 5-ти случайных чисел с подсчетом их суммы.

Нужно:

Выбрать "Больше 50" или "Меньше 50", после этого нажать "Играть" и получить ответ "Ты выиграл" или "Ты проиграл", в зависимости от того, какая кнопка была нажата, и какая сумма чисел сгенерирована. Если никакая кнопка не нажата, поле с выводом результата оставить пустым.

Кнопки и генератор+подсчет суммы готовы.

Но не могу разобраться с тем, как реализовать функции "Больше", "Меньше", чтобы они работали именно после нажатия кнопок.

Сделал следующий образом:

var showP, showPA;

$('#button-100').click(function() {

if (sum > 50) { showP = "you wonP!"; } 
else
{ showP = "you loseP!"; }

document.getElementById("test").innerHTML = showP;

if (sum < 50) { showPA = "you wonPA1!"; } 
else
{ showPA = "you losePA!"; }

document.getElementById("test").innerHTML = showPA;

});

В HTML'е прописал к кнопкам

1. <a id="button-P">Больше  50</a>
2. <a id="button-PA">Меньше 50</a>
3. <a id="button-100">Играть</a>

К полю вывода

<textarea readonly id="test">
   
   </textarea>

Но это, естественно, белиберда. При нажатии "Играть" получаю все время только результат со второй кнопки ("Меньше 50"), даже когда не нажимаю на нее.

Только начала изучать JavaScript, поэтому буду очень благодарен любой помощи, и извиняюсь за глупости в коде выше.