How to edit rows in a collection?

To paint a picture of what I’m trying to achieve, here is the scenario:

  1. In a dynamic page, I’m displaying several data fields from one row of a collection. For example:
{
'pet's name' : value
'pet's address' : value
'pet's favorite football team' : value
'pet's most hated car' : value
}

I want users to be able to edit the values displayed on the dynamic page, so I put a link that opens a lightbox that displays the same information in input boxes. I send the .currentItem() from the dynamic page to the lightbox via .getContext().

  1. Up to that part, it’s working properly and I am able to edit what is displayed in the input fields. The stump now is how to save what is edited.

So I ask for help from the generous gurus and ninjas of this forum, can you point me in the right direction on how to manage .update() or other alternatives?

import wixData from "wix-data";
let item = //the item data you sent to the lightbox;
$w.onReady(() => {
$w("#saveButton").onClick(() => {
if("#input1, #input2, #input3").valid){
[item.petsName, item.petsAddress, item.petsTeam] =
[$w("#input1").value, $w("#input2").value, $w("#input3").value];
wixData.update("CollectionName", item)
.then(() =>/* show success message*/)
.catch(err => {
console.log(err);
//show error message
});
}
})
})