Get Html code elements values

Hi everybody
I have followed this great tuoturial to get html element value to wix Velo: Working with the HTML iframe Element | Help Center | Wix.com
but this is only for one element what about muliti elempents for example 4 textboxes or more with checkbox values how will i get the data and pass it whatever to parameter or txtboxes
this is my trial

// For full API documentation, including code examples, visit Velo API Reference - Wix.com
$w.onReady( function () {
// when a message is received from the HTML element
$w(“#myHtmlElement”).onMessage( (event) => {
let Getdata = event.data;
let firstOfType = Getdata[0];
console.log(firstOfType);
});
} );

export function messageSendButton_onClick() {
// send message to the HTML element
$w(“#myHtmlElement”).postMessage($w(“#textInput1”).value);
}

i tried to get them in array like this Getdata[0][1]
but i get undefined


this is my html code

.button { background-color: #155DE9; color: white; border: none; padding: 10px 20px; text-align: center; font-family: 'Arial'; } .label { font-family: 'Arial'; } .input { font-size: 14px; }
<script type="text/javascript"> 
  // when a message is received from the page code 
  window.onmessage = (event) => { 
    debugger; 
    if (event.data) { 
      document.getElementById("theLabel").innerHTML = event.data; 
      let receivedData = event.data; 
      var arr = receivedData.split (","); 
      var selIndex = (arr[1]); 
    } 
  }; 

// send message to the page code
function button_click() {
window.parent.postMessage(document.getElementById(“theMessage”).value, “");
window.parent.postMessage(document.getElementById(“theMessage1”).value, "
”);
window.parent.postMessage(document.getElementById(“theMessage2”).value, “");
window.parent.postMessage(document.getElementById(“theMessage3”).value, "
”);
}

HTML Label

Send Message