Radio buttons deselect when I press anywhere else on page - html

Question

I have created simple radio buttons so that the user can select the color they like. It worked for a while but has now stopped keeping the selected option. After selecting one, the option deselects itself when I press any other part of the page.
I never had the attribute 'name' of them the same before but they were working so I thought that might have been the issue that didn't solve it either.
<form name="newActivity" method="post" action="newActivity.php">
<?php include('errors.php'); ?>
<label class="colour-title">COLOUR</label>
<div class="select">
<label>
<input type="radio" name="colour" value="blue">
<span class="blue">BLUE</span>
</label>
<label>
<input type="radio" name="colour" value="purple">
<span class="purple">PURPLE</span>
</label>
<label>
<input type="radio" name="colour" value="pink">
<span class="pink">PINK</span>
</label>
<label>
<input type="radio" name="colour" value="green">
<span class="green">GREEN</span>
</label>
</div>
My radio buttons are also part of a form as shown above.

Answer 1

use id instead of class
The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.
example
<form name="newActivity" method="post" action="newActivity.php">
<?php include('errors.php'); ?>
<label class="colour-title">COLOUR</label>
<div class="select">
<label>
<input type="radio" name="colour" value="blue">
<span id="btn-color">BLUE</span>
</label>
<label>
<input type="radio" name="colour" value="purple">
<span id="btn-color">PURPLE</span>
</label>
<label>
<input type="radio" name="colour" value="pink">
<span id="btn-color">PINK</span>
</label>
<label>
<input type="radio" name="colour" value="green">
<span id="btn-color">GREEN</span>
</label>
</div>