Two different radio buttons in a foreach working as one

Question

I have this code with a 5 star rating(radio button) to be used in two different questions.

The problem is: the two ratings of each question are working as one. I mean, if I select something in the first question when I do a selection in the second question it unselect in the first one. It is working as a unique radio button.

How can I fix it? What am I missing?

           @foreach (var pergunta in Model.ls_pergunta)
            {
                <div class="form-group has-feedback">
                    <div class="col-xs-12">
                        <label for="co_pergunta_avaliacao" class="control-label">@pergunta.tx_pergunta</label>
                    </div>
                    <div class="col-xs-8">
                        <div class="estrelas" id="pergunta_@pergunta.co_pergunta">
                            @{
                                int i = 1;
                                foreach (var item in @pergunta.ls_opcoes)
                                {
                                    <label for="cm_star-@i"><i class="fa"></i></label>
                                        <input type="radio" id="cm_star-@i" name="pergunta_@pergunta.co_pergunta" value=@item.Value />
                                    i++;
                                }
                            }
                        </div>
                    </div>
                </div>

.estrelas input[type=radio] {
  display: none;
}
.estrelas label i.fa:before {
  content:'\f005';
  color: #FC0;
  font-size:40px;
}
.estrelas input[type=radio]:checked ~ label i.fa:before {
  color: #CCC;
}

I followed the instructions that I received, but did not work. Below I post the View Source Code:

<div class="form-group has-feedback">
                    <div class="col-xs-12">
                        <label for="co_pergunta_avaliacao" class="control-label">ASPECTOS FORMAIS/GRAMATICAIS</label>
                                                
                    </div>
                    <div class="col-xs-8 estrelas" id="pergunta_1">
                        
                            <label for="cm_star-1"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-1" name="pergunta_1" value=1_1 />
                            <label for="cm_star-2"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-2" name="pergunta_1" value=1_2 />
                            <label for="cm_star-3"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-3" name="pergunta_1" value=1_3 />
                            <label for="cm_star-4"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-4" name="pergunta_1" value=1_4 />
                            <label for="cm_star-5"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-5" name="pergunta_1" value=1_5 />
                                   </div>

                </div>
                <div class="form-group has-feedback">
                    <div class="col-xs-12">
                        <label for="co_pergunta_avaliacao" class="control-label">CONTE&#218;DO/ARGUMENTA&#199;&#195;O</label>
          
                    </div>
                    <div class="col-xs-8 estrelas" id="pergunta_2">
                        <label for="cm_star-1"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-1" name="pergunta_2" value=2_1 />
                            <label for="cm_star-2"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-2" name="pergunta_2" value=2_2 />
                            <label for="cm_star-3"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-3" name="pergunta_2" value=2_3 />
                            <label for="cm_star-4"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-4" name="pergunta_2" value=2_4 />
                            <label for="cm_star-5"><i class="fa"></i></label>
                                <input type="radio" id="cm_star-5" name="pergunta_2" value=2_5 />

                     </div>
                </div>

Answer 1

In HTML you create a group of related radio buttons by giving them all the same name attribute.

Demo:

 Group 1: <input type="radio" name="group1" value=1 />1 <input type="radio" name="group1" value=2 />2 <input type="radio" name="group1" value=3 />3 <input type="radio" name="group1" value=4 />4 <br/> Group 2: <input type="radio" name="group2" value=1 />1 <input type="radio" name="group2" value=2 />2 <input type="radio" name="group2" value=3 />3 <input type="radio" name="group2" value=4 />4

Therefore in your case you're going to have to vary the name="fb" , changing it each time you're rendering a new question.

It also would make sense if the name matches the name of the field in the viewmodel that you want it to map to when the form is submitted.