How to insert checkbox data with input fields Laravel?

Question

I have multiple checkbox field and when any checkbox checked then 3 input field appear. I want to insert data for 1 checkbox value with 3 input value. User can check multiple checkbox. I am totally blank how can I do that? Please help.

<div class="form-check">
 <input class="form-check-input fighting_style" name="txt_fightingStyle[]" type="checkbox" value="MMA" id="MMA">
 <label class="form-check-label" for="flexCheckDefault">
 MMA
</label>

<section class="fighiting_value" id="MMA_input" style="display: none;">
<div class="row">
<div class="col-3">
 <div class="mb-3">
 <label for="exampleFormControlInput1" class="form-label text-dark">WIN</label>
<input type="text" class="form-control  fights txt_win"
             name="txt_win[]" onblur="totalFights()" id="txt-win" placeholder="">
</div>
</div>

<div class="col-3">
   <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label text-dark">LOSS </label>
  <input type="text" class="form-control fights txt_loss" data-points = "75"
                                                           name="txt_loss[]" onblur="totalFights()" id="txt-loss" placeholder="">

</div>
</div>
<div class="col-3">
 <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label text-dark">DRAW</label>
<input type="text" class="form-control fights txt_draw" data-points = "150"
                                                           name="txt_draw[]" onblur="totalFights()" id="txt-draw" placeholder="">

  </div>
 </div>
 </div>
 </section>
</div>

Answer 1

Changing the visibility of the input fields in the first <section> element following the clicked checkbox can be done through something like below:

document.querySelectorAll("input[type=checkbox]").forEach(cb=>cb.addEventListener("click",ev=>{
 let sibl=(cb.closest("label")??cb).nextElementSibling;
 while(sibl&&!sibl.matches("section"))
  sibl=sibl.nextElementSibling; 
 sibl.style.display=ev.target.checked?"":"none";
}));

const inps=[...document.querySelectorAll("input")];
document.querySelector("button").onclick=flds=>{
  let data=inps.reduce((a,e)=>{
   if(e.type=="checkbox")
    a.push(flds=[e.checked&&e.value]);
   else
    flds.push(e.value);
   return a;
  },[]);
  fetch("https://jsonplaceholder.typicode.com/users/",{method:"POST",headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
  .then(r=>r.json()).then(console.log)
}

<div class="form-check">
 <input class="form-check-input fighting_style" name="txt_fightingStyle[]" type="checkbox" value="MMA" id="MMA">
 <label class="form-check-label" for="MMA">
 MMA
</label>
<section class="fighting_value" id="MMA_input" style="display: none;">
<div class="row">
<div class="col-3">
 <div class="mb-3">
 <label for="exampleFormControlInput1" class="form-label text-dark">WIN</label>
<input type="text" class="form-control  fights txt_win"
         name="txt_win[]" id="txt-win" value="w1">
</div>
</div>

<div class="col-3">
   <div class="mb-3">
<label for="exampleFormControlInput1" class="form-label text-dark">LOSS </label>
  <input type="text" class="form-control fights txt_loss" data-points = "75"
                                                       name="txt_loss[]" id="txt-loss" value="l1">

</div>
</div>
<div class="col-3">
 <div class="mb-3">
<label for="exampleFormControlInput1" class="form-label text-dark">DRAW</label>
<input type="text" class="form-control fights txt_draw" data-points = "150"
                                                       name="txt_draw[]" value="d1">

  </div>
 </div>
 </div>
 </section><br>
<label class="form-check-label"><input class="form-check-input fighting_style" name="txt_fightingStyle[]" type="checkbox" value="MMA2">
 MMA2
</label>
<section class="fighting_value" style="display:none;">
<div class="row">
<div class="col-3">
 <div class="mb-3">
 <label class="form-label text-dark">WIN2
<input type="text" class="form-control  fights txt_win"
         name="txt_win[]" value="w2"></label>
</div>
</div>

<div class="col-3">
   <div class="mb-3">
<label class="form-label text-dark">LOSS2
  <input type="text" class="form-control fights txt_loss" data-points = "75"
                                                       name="txt_loss[]" value="l2"></label>

</div>
</div>
<div class="col-3">
 <div class="mb-3">
<label class="form-label text-dark">DRAW2
<input type="text" class="form-control fights txt_draw" data-points = "150"
                                                       name="txt_draw[]" value="d2"></label>

  </div>
 </div>
 </div>
 </section>
</div>
<button>save</button>

The above snippet works without referencing any id attributes. It can be applied on any number of checkbox/input field systems.

I have added a little more code, showing how - upon a click on the "save" button - all the input fields can be collected in an array of arrays (two records with four columns each) that is then posted to some kind of backend where a serverside script would then put the data via a suitable SQL INSERT statement into the database. For the demo I used a publicly available dummy API.