JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <form name = "f">
      <div id = ”content”>
        <div class = "sv-row">
          <div class = "sv-form-group">
            <div class = "sv-col-sm-8">						
              <label for = "ANSWER.TTQ.MENSYS.2." class="ui-helper-hidden-accessible">to - who</label>
              <input type = "text" name = "ANSWER.TTQ.MENSYS.2" id = "ANSWER.TTQ.MENSYS.2." value = "" ss2-item = "who" data-ttqseqn = "90" class = "forminfree sv-form-control">
              <input type = "hidden" name = "DUM_FIXT.TTQ.MENSYS.2">
              <span id = "error-for-ANSWER.TTQ.MENSYS.2"></span>						
            </div>
          </div>
        </div>
        <div class = "sv-row">
          <div class = "sv-form-group">
            <div class = "sv-col-sm-8">						
              <label for = "ANSWER.TTQ.MENSYS.3." class = "ui-helper-hidden-accessible">to - bank</label>               <select name = "ANSWER.TTQ.MENSYS.3" id = "ANSWER.TTQ.MENSYS.3." ss2-item = "bank_name" data-ttqseqn = "100" class = "forminfree sv-form-control" onchange = "contentChange(event)"> 
                <option value = ""></option>
                <option value = "BARCLAYS">Barclays</option>
                <option value = "LLOYDS">Lloyds Bank</option>
                <option value = "SANTANDER">Santander</option>
                <option value = "HSBC">HSBC</option>
                <option value = "COOP">Co-operative Bank</option>
                <option value = "HALIFAX">Halifax</option>
                <option value = "TSB">TSB Bank</option>
                <option value = "NATWEST">Natwest</option>
                <option value = "NATIONWIDE">Nationwide</option>
                <option value = "RBS">Royal Bank of Scotland</option>
              </select>
              <input type = "hidden" name = "DUM_FIXT.TTQ.MENSYS.3">
              <span id = "error-for-ANSWER.TTQ.MENSYS.3"></span>						
            </div>
          </div>
        </div>
        <div class = "sv-row">
          <div...

JavaScript

// When page has finished loading...
$(document).ready(function(){
	
  	// Let's get the name of the first form on the page - not a problem as there is only ever one form per TTE
		var form_name = $('form')[0].name;
 		
    // Using this form, let's list the element types we want to check and when any of them are input into...    
    $("[name='"+form_name+"']").find("input,textarea,select").on('input', function () {
    		
        // Get the id and ss2-item value from the input element  
        var input_id = (this.id);
        var ss2_value = document.getElementById(input_id).getAttribute("ss2-item");
        var span_id = ss2_value;
        
        alert(input_id);
        
        // We need to check if the input from a  dropdown menu
        var dropdown_check = $("[id='"+input_id+"']").is('select');
        
        // If the input is from a dropdown menu...
        if(dropdown_check == true)
        {
        	// Let's set the input value as the label rather than the value so it looks nice in the letter
        	var input_value = $("[id='"+input_id+"'] :selected").text();	
        }
        
        // Else the input is something other than a dropdown menu...
    		else
        {
        	// So it's ok to use its value
       		var input_value = $("[id='"+input_id+"']").val();
        }
        
        // Let's use the span_id to write the HTML to 
        if(span_id == "")
        {
        	document.getElementById(span_id).innerHTML = "<p>"+input_value+"</p>";
        }
        else
       	{
    			document.getElementById(span_id).innerHTML = input_value;
        }
        
        // Let's also add the bg-success class to the span so that it is highlighted on the page 
				$("[id='"+span_id+"']").addClass( "bg-success");
				$("[id='"+span_id+"']").attr('style', 'padding: 10px');
		
    		// If the input_value is empty then the user has deleted / selected a blank value...
        if(input_value == "")
        {
        	// So let's remove the...