JSFiddle - React, Tailwind, and code Playground

HTML

<table width="700" border="0" align="left" name="new_records_table" id="new_records_table" style="margin-left:25%;">
  <tr>
    <td width="800">Create new format: <input type="text" name="new_format_name" id="new_format_name" />
      <select name="new_format_type" id="new_format_type" onchange="toggleVisibility('delimitation_choices');">
        <option value="fixedWidth" selected="selected">Fixed Width</option>
        <option value="delimited">Delimited</option>
      </select>
      <select name="delimitation_choices" id="delimitation_choices" class="delimitation_choices">
        <option value="\\t">Tab</option>
        <option value=",">Comma</option>
      </select>
    </td>
    <td><a onclick="if(event.preventDefault) event.preventDefault(); else event.returnValue = false; toggleVisibility('new_format');"><button>Create</button></a></td>
  </tr>
</table>

CSS

.delimitation_choices {
	visibility: hidden;
}
.new_format {
	visibility: hidden;
}

JavaScript

function toggleVisibility(toggle_class) {
	var elarray = document.getElementsByClassName(toggle_class);
	for(var i = 0; i < elarray.length; i++) {
		if (elarray[i].style.visibility == "hidden") {
			elarray[i].style.visibility = "visible" ;
		}
		else (elarray[i].style.visibility == "visible"){
			elarray[i].style.visibility = "hidden" ;
		}
	}
}