How to send array of data with blade templates and Laravel?

I would like to send below section's data as an array to Laravel backend. Is there method to accomplish that without stringifying?

// preferred output

$members = [
    ["name" => "Sam", "location" => "US"  ],
    ["name" => "Mike", "location" => "UK" ]
  ];

Assuming you have a form with select and location on each row.

• First loop and push all values in one array
• Then use JSON.stringfy() to convert the data in JSON format.

Here is the example snippet:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var data = [];
document.querySelector("#submitForm").addEventListener("submit", (e) => {
e.preventDefault();
document.querySelectorAll(".member_name").forEach((member,index) => {
let name = member.value;
let location = member.nextElementSibling.value;
data.push({name: name, location: location});
});
// Convert data into JSON format
data = JSON.stringify(data);
console.log(data);
// Send Data to backend
});

<!-- language: lang-html -->

<form action="submit" method="post" id="submitForm">
<div>
<select name="member_name" class="member_name">
<option value="member1" selected>Member 1</option>
<option value="member2">Member 2</option>
<option value="member3">Member 3</option>
</select>
<select name="member_location" class="member_location">
<option value="location1" selected>Location 1</option>
<option value="location2">Location 2</option>
<option value="location3">Location 3</option>
</select>
</div>
<div>
<select name="member_name" class="member_name">
<option value="member1">Member 1</option>
<option value="member2">Member 2</option>
<option value="member3">Member 3</option>
</select>
<select name="member_location" class="member_location">
<option value="location1">Location 1</option>
<option value="location2">Location 2</option>
<option value="location3">Location 3</option>
</select>
</div>
<div>
<select name="member_name" class="member_name">
<option value="member1">Member 1</option>
<option value="member2">Member 2</option>
<option value="member3">Member 3</option>
</select>
<select name="member_location" class="member_location">
<option value="location1">Location 1</option>
<option value="location2">Location 2</option>
<option value="location3">Location 3</option>
</select>
</div>
<input type="submit" value="Submit">
</form>

<!-- end snippet -->

You can adjust the html for errors and other stuff with or without blade syntax as you wish.

Structure your html form like below,

<select name="members[0][name]">
<input type="text" name="members[0][location]">

and so on...

index in members[index][name] would be dynamic and increased by 1

And in your controller function you will get members array like,

dd($request->members);