javascript - BOOTSTRAP RADIO BUTTON with css skin in 2 different panels doesn't work -

i have this: https://jsfiddle.net/8p984uc0/

its 2 different bootstrap panels. (i had 30 panels in final page) - simplify..

i made stylish radio button using:

<label class="btn btn-success-on btn-success-inv bk-fg-white btn-sm bk-rd-off bk-bd-success" style="width: 90px; max-width: 90px;"> <input type="radio" name="choice2" id="choice2" value="1" /><i class="fa fa-thumbs-o-up"></i> choice 01!</label> 

my problem:

• with style in radio if put in different panels - radio buttons doesnt work. (i check radio 1 - , check radio 2 - , radio 1 continues checked)

• if put booth in same panel, no problem. (if check radio 1, , check radio 2 - radio 1 unchecked).

whats wrong?

tks!!

1- https://jsfiddle.net/8p984uc0/2/ radios in same panel, works fine.

when put them in same panel put them in same button group, think that's point.

this example of first fiddle working, though stile broken.

<div class="btn-group" data-toggle="buttons">      <div class="panel bk-widget bk-bd-off bk-chrome-fix col-lg-4 col-md-4 col-sm-4 col-xs-4">         ...     </div>     <div class="panel bk-widget bk-bd-off bk-chrome-fix col-lg-4 col-md-4 col-sm-4 col-xs-4">         ....     </div> <div> 

as can see in 2 different panels, button-group same.

and this example of second fiddle dosn't work, i've put radio buttons in 2 different button groups. i'm not sure need col-lg, col-md, col-sm , col-sx, that's question.

edit: here new fiddle, buttons have right style, , works. changed buttons name choices, makes more sense, , updated css adding

input[name=choices] {     display:none }