JSFiddle - React, Tailwind, and code Playground

by steadily

HTML

<form id="salesforce-form">
  <input type="hidden" name="description">

  Field 1
  <textarea name="whateveryouwantNameOfValue"></textarea>
  <hr>
  Field 2
  <input type="text" name="secondFieldName">

</form>

<script>
const form = document.getElementById('salesforce-form');

// get all the input elements within the form
const inputs = form.querySelectorAll('input, textarea');
const descriptionField = form.querySelector('input[name=description]');

// add an event listener for the 'input' event to each input element
for (const input of inputs) {
  input.addEventListener('change', updateResult);
}

function updateResult() {
  // create an array to store the values of the form inputs
  const values = [];

  // loop through the input elements and concatenate their values 
  let result = "";
  for (const input of inputs) {
    	// Skip reading the input field "description" since thats only for output
  	if(input.name == 'description') {
    	continue;
    }
  	result = `${result} \n ${input.name}: ${input.value}`
  }

  // Dump the result into the description field
	descriptionField.value = result
  
  // Uncomment this line to remove the alert
  alert(descriptionField.value)
}
</script>