JSFiddle - React, Tailwind, and code Playground

HTML

<form id="some-form">
    <label for="some-form__input-yo">Yo</label>
    <input id="some-form__input-yo" type="text" name="some-form__input-yo" value="Hi" />
    <label for="some-form__input-lo">Lo</label>
    <input id="some-form__input-lo" type="text" name="some-form__input-lo" value="Ho" />
</form>
<aside class="someform__debug">
<h4>Form values:</h4>
    <div>
        Iterated: <output class="some-output--iterated"></output>
    </div>
    <div>
    Accessing properties of <em>HTMLFormElement.elements&lt;HTMLFormControlsCollection&gt;</em>: <output class="some-output--properties"></output>
    </div>
</aside>

CSS

#some-form,
.someform__debug div { 
  margin-bottom: 20px;
}
.someform__debug output {
  font-family: Courier;
  color: green;
}

JavaScript

var formElements = document.querySelector('#some-form').elements;
for (let element of formElements) {
  document.querySelector('.some-output--iterated').innerHTML += element.value + ' ';
}
document.querySelector('.some-output--properties').innerHTML = 
	formElements['some-form__input-yo'].value + ' ' + formElements['some-form__input-lo'].value;