Как отвязать друг от друга radio buttons?

Question

[parkito]

Здравствуйте. Помогите, пожалуйста, решить проблему. У меня на странице есть два блока. В каждом блоке есть группа radio buttons. Проблема состоит в том, что эти radio buttons соединяются друг с другом в соседних блоках. Подскажите пожалуйста, как их можно разъединить?

https://jsfiddle.net/parkito/03aoLhky/1/

<div class="panel-body">
                        <h3>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                           checked>
                                    Option one is this and that&mdash;be sure to include why it's great
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
                                    Option two can be something else and selecting it will deselect option one
                                </label>
                            </div>
                        </h3>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#myModalGreen">Change
                            </button>
                        </div>
                    </div>

                </div>
            </div>

Второй блок

<div class="my-panel-body">
                        <h3>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"
                                           checked>
                                    Option one is this and that&mdash;be sure to include why it's great
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
                                    Option two can be something else and selecting it will deselect option one
                                </label>
                            </div>
                        </h3>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#myModalGreen">Change
                            </button>
                        </div>
                    </div>

                </div>
            </div>

Comments

[DevMan]

размещайте код в песочницах типа codepen или jsfiddle.

[parkito]

DevMan, Добавил

Answer 1

[Денис Букреев]

Дать разный name=""

Answer 2

[DevMan]

в одной форме у вас 4 radio-кнопки с одинаковым названием. логично, что они связаны.
также у вас повторяется атрибут id, что не правильно.

https://jsfiddle.net/03aoLhky/3/

Answer 3

[Олег]

https://jsfiddle.net/joomla/03aoLhky/2/
Правильно используй label
+ у тебя два незакрытых div висит. Редактором тоже научись пользоваться. Подсветка для этого и нужна
В твою кучу и вкинул, что бы сам и поправил код ;)