Я так понял что мне лучше делать радио-переключатель. Вот переписал под группу. Пока классы цветов для кнопок взял бутстраповские, потом перепишу под нужные мне оттенки.
Просьба - посмотрите пожалуйста мой макет, может какие атрибуты лишние и их стоит удалить.
<div class="col-6 krovColor">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="color" id="option1" autocomplete="off" value="Терракотовый" checked>1</label>
<label class="btn btn-secondary">
<input type="radio" name="color" id="option2" autocomplete="off" value="Медный">2</label>
<label class="btn btn-success">
<input type="radio" name="color" id="option3" autocomplete="off" value="Каштановый">3</label>
<label class="btn btn-danger">
<input type="radio" name="color" id="option3" autocomplete="off" value="Коричневый">4</label>
<label class="btn btn-warning">
<input type="radio" name="color" id="option3" autocomplete="off" value="Кирпичный">5</label>
</div>
</div>
Думаю такой макет с переключателем (радио) правильнее, а визуально он не отличается от предыдущего.
По обработке радио кнопок я на jQuery и здесь видел документацию - должен справиться с решением, но если есть готовое решение как правильно брать значение - ругать не буду.
Меня интересует какие атрибуты лишние чтобы их убрать. На странице сайта будет похожий переключатель только с другим параметром.