Axios store same information inside foreach - vue.js

Question

I have an array of objects that is needed to be store in DB when clicking on a single button. Therefore I have used foreach loop and inside the loop, I did the AXIOS POST. AXIOS stores the same information/ object. all objects of the array are not saved is there any solution.
let arr = [
{
name:'abc',
co: 1
},
{
name:'def',
co: 2
},
{
name:'ghi',
co: 3
},
];
let fd = new FormData();
arr..forEach((element) => {
fd.append("name", element.name);
fd.append("co", element.co);
this.$http.post("po", fd, { headers: {
"Content-Type": "multipart/form-data",
},
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
});
WHEN MAPPING THE ARRAY as follows. an error occurs cannot read property co of undefined
let element= this.formList.map((obj) => obj);
// appending data
// axios POST
IT ONLY SAVES THE LAST OBJECT. WHAT I WANT IS EACH OBJECT SHOULD BE STORE

Answer 1

the mistake I did was putting the Axios inside the foreach, which overwrites the object each time it loops therefore only the last item gets stored. the working solution is below
save() {
this.StoreMulti(this.arr, 0);
}
StoreMulti(arr, i){
this.$http.post("po", fd, { headers: {
"Content-Type": "multipart/form-data",
},
.then((res) => {
if (i < arr.length - 1) {
this.StoreMulti(arr, ++i);
}
onsole.log(res.data);
})
.catch((err) => {
console.log(err);
});
}
THIS STORE THE ENTIRE ARRAY BY SENDING POST REQUEST ONE BY ONE