Несколько групп переключателей в одной форме, не сохраняя стиль

Question

У меня есть форма с тремя группами переключателей. Если я нажимаю на любой из параметров в группе 1, он выделяется зеленым цветом. Если я затем нажимаю на любой из параметров в группе 2, он выделяется зеленым цветом, но отключает выбранный параметр в группе 1. Это то же самое для группы 3. Прочитав По ряду постов, касающихся нескольких радиогрупп в одной форме, я не нашел решения. Кто-нибудь может увидеть, где я иду не так?

Группа 1

<div class="btn-group" data-toggle="buttons">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="radio" class="btn btn-primary-RoomLevel btn-xs" name="RoomLevel" id="RoomLevel_1" value="1">Name, text and logo</button>
<button type="radio" class="btn btn-primary-RoomLevel btn-xs" name="RoomLevel" id="RoomLevel_2" value="2">Name and logo</button>
<button type="radio" class="btn btn-primary-RoomLevel btn-xs" name="RoomLevel" id="RoomLevel_3" value="3">Name only</button>
<button type="radio" class="btn btn-primary-RoomLevel btn-xs" name="RoomLevel" id="RoomLevel_4" value="4">Logo only</button>
</div>
</div>

Группа 2

<div class="btn-group" data-toggle="buttons">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="radio" class="btn btn-primary-DisplayLevel btn-xs" name="DisplayLevel" value="1" id="DisplayLevel_1" value="1">Name, text and logo</button>
<button type="radio" class="btn btn-primary-DisplayLevel btn-xs" name="DisplayLevel" value="1" id="DisplayLevel_2" value="2">Name and logo</button><br/>
<button type="radio" class="btn btn-primary-DisplayLevel btn-xs" name="DisplayLevel" value="1" id="DisplayLevel_3" value="3">Name only</button><br/>
<button type="radio" class="btn btn-primary-DisplayLevel btn-xs" name="DisplayLevel" value="1" id="DisplayLevel_4" value="4">Logo only</button>
</div>
</div>

Группа 3

<div class="btn-group" data-toggle="buttons">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="radio" class="btn btn-primary-BoardLevel btn-xs" name="BoardLevel" value="1" id="BoardLevel_1" value="1">Display On</button>
<button type="radio" class="btn btn-primary-BoardLevel btn-xs" name="BoardLevel" value="1" id="BoardLevel_2" value="2">Display Off</button><br/>
</div>
</div>

CSS

.btn-group-vertical {
    height: 80px;
    background-color: #999999;  
}

.btn-primary-RoomLevel {
    color: #333333;
    background-color: #E4E4E4;
    border-color: #999999;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 175px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
}
.btn-primary-RoomLevel:focus,
.btn-primary-RoomLevel.focus {
    color: #333333;
    background-color: #93FF93;
    border-color: #999999;
}
.btn-primary-RoomLevel:hover {
    color: #CC0000;
    background-color: #D9FFD9;
    border-color: #999999;
}

.btn-primary-BoardLevel {
    color: #333333;
    background-color: #E4E4E4;
    border-color: #999999;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 175px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
}
.btn-primary-BoardLevel:focus,
.btn-primary-BoardLevel.focus {
    color: #333333;
    background-color: #93FF93;
    border-color: #999999;
}
.btn-primary-BoardLevel:hover {
    color: #CC0000;
    background-color: #D9FFD9;
    border-color: #999999;
}

.btn-primary-DisplayLevel {
    color: #333333;
    background-color: #E4E4E4;
    border-color: #999999;
    padding-top: 1px;
    padding-bottom: 1px;
    width: 175px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11px;
}
.btn-primary-DisplayLevel:focus,
.btn-primary-DisplayLevel.focus {
    color: #333333;
    background-color: #93FF93;
    border-color: #999999;
}
.btn-primary-DisplayLevel:hover {
    color: #CC0000;
    background-color: #D9FFD9;
    border-color: #999999;
}

Большое спасибо заранее за вашу помощь и время.