Retrieving question from database and display it in radio button - laravel

Question

I have a questions table, I managed to create a form and send the data to database, i need a user to answer the question by selecting the best answer from radio button list, i have retrieved the question from a database but the radio button does not work correct, when i select the answer from the first question and the when a go to second question the first question radio button is unchecked, i have attached my code. Please anyone who can help me
my view code
<h2>Welcome to Online Teacher Verification Test:</h2>
#foreach($qns as $qn)
{{$qn->question_name}}
<div class="form-check">
<label class="form-check-label" for="opt1">
<input type="radio" class="form-check-input" id="opt1"
name="opt" value="opt1">{{$qn->opt1}}
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="opt2">
<input type="radio" class="form-check-input" id="opt2"
name="opt" value="opt2">{{$qn->opt2}}
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="opt3">
<input type="radio" class="form-check-input" id="opt3"
name="opt" value="opt3">{{$qn->opt3}}
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="opt4">
<input type="radio" class="form-check-input" id="opt4"
name="opt" value="opt4">{{$qn->opt4}}
</label>
</div>
#endforeach
my controller code
use App\Topics;
use App\Questions;
class QuestionController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$qns= Questions::all();
return view('test.index')->with('qns',$qns);
}
I need when a user answer a question by selecting an answer from button, when he/she moves to the second question the first question should remain checked

Answer 1

Well all the radio buttons have the same name when dom renders. So if you check the first one and then the second, the first one becomes unchecked. Try something like
#foreach($qns as $qn)
{{$qn->question_name}}
<div class="form-check">
<label class="form-check-label" for="opt1">
<input type="radio" class="form-check-input" id="opt1"
name="opt{{ $qn->id }}" value="opt1">{{$qn->opt1}}
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="opt2">
<input type="radio" class="form-check-input" id="opt2"
name="opt{{ $qn->id }}" value="opt2">{{$qn->opt2}}
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="opt3">
<input type="radio" class="form-check-input" id="opt3"
name="opt{{ $qn->id }}" value="opt3">{{$qn->opt3}}
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="opt4">
<input type="radio" class="form-check-input" id="opt4"
name="opt{{ $qn->id }}" value="opt4">{{$qn->opt4}}
</label>
</div>
#endforeach
This way you will get different name for each questions and you can check for each question. Well now if you want save them to database you can access the answers in controller with different names try like
public function saveAnswers(Request $request)
{
$questions = Questions::all();
foreach($questions as $qns){
$name = "opt".$qns->id;
$answer = $request->$name;
//here you can save or anything you want to do
}
}

Answer 2

Set name of radio button like name="qn{{ $qn->id }}" so that it is unique.