JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
	<script>
  	function combinegenes(){
			var a = document.getElementById("geneticsa").value;
      a = a.trim();
  		var b = document.getElementById("geneticsb").value;
      b = b.trim();
		  var names = document.getElementById("names").value;
      names = names.split("\n");
      for(var name in names){
      	name = name.trim();
      }
      console.log(a[0]);
		  console.log(a);
		  console.log(b);
  		console.log(names);
      
      var output = "<table>";
			var ab = [a, b];
			var i = 0;
			var rand = 0;
			var genelen = 0;
			while (i < names.length){
  			genelen = 0;
  			output += "<tr><td>" + names[i] + "</td><td>";
  			while (genelen < 10){
    			rand = Math.floor((Math.random() * 2));
    			output += ab[rand][genelen] + ab[rand][genelen + 1];
    			genelen += 2;
  			}
  			output += "</td></tr>";
  			i += 1;
			}
			output += "</table>";
      
  		console.log(output);
  		document.getElementById("output").innerHTML = output;
		}
	</script>
</head>
<body>
<div id="input">
	<div class="section">
		Genetics A
  	<br></br>
  	<textarea id="geneticsa">BrSmInNoNo</textarea>
	</div>
	<div class="section">
		Genetics B
  	<br></br>
  	<textarea id="geneticsb">NoNoNoDeSp</textarea>
	</div>
	<div class="section">
		Ape Names
  	<br></br>
  	<textarea id="names">card
pokes
Kevan
9spaceking
derrick
Quincunx
Trigon</textarea>
	</div>
  <button onclick="combinegenes()">
  	Splice Genes
  </button>
</div>
<div id="output">
	<br></br>
	Output
</div>
</body>
</html>