JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.4/seedrandom.min.js"></script>
	<script>
  	function combinegenes(){
      var seed = document.getElementById("seed").value;
      seed = seed.trim();
			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){
        if(names[name] == "" || names[name] == "Cuddlebeam"){
          console.log(name);
          names.splice(name, 1);
        }
      }
      console.log(a[0]);
		  console.log(a);
		  console.log(b);
  		console.log(names);
      
      Math.seedrandom(seed);
      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">
		Random Seed:
  	<textarea id="seed"></textarea>
	</div>
<br></br>
<div id="input">
	<div class="section">
		Genetics A:
  	<textarea id="geneticsa"></textarea>
	</div>
  <br></br>
	<div class="section">
		Genetics B:
  	<textarea id="geneticsb"></textarea>
	</div>
<br></br>
	<div class="section">
		Ape Names:
  	<textarea id="names"></textarea>
	</div>
<br></br>
  <button onclick="combinegenes()">
  	Splice Genes
  </button>
</div>
<div id="output">
	<br></br>
	Output
</div>
</body>
</html>