JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>

<div class='parent'>Mother: <div id='mumbreed'>Aquila</div><br>
<div id='mumpic'><img src='http://griffusion.elementfx.com/pics/newart/Aquila/f/4/line.png' style='width:240px;height:163px;'></div><br>
<select class='pickbreed' id='m1'> 
<option value='Dairy' selected>Dairy</option>
<option value='Fruit'>Fruit</option>
<option value='Meat'>Meat</option>
<option value='Bread'>Bread</option>
<option value='Gold'>Gold</option>
</select> 
<select class='pickbreed' id='m2'>
<option value='Dairy' selected>Dairy</option>
<option value='Fruit'>Fruit</option>
<option value='Meat'>Meat</option>
<option value='Bread'>Bread</option>
<option value='Gold'>Gold</option>
</select>
</div> 
<div class='parent'>Father: <div id='dadbreed'>Aquila</div><br>
<div id='dadpic'><img src='http://griffusion.elementfx.com/pics/newart/Aquila/m/4/line.png' style='width:240px;height:163px;'></div><br>
<select class='pickbreed' id='d1'>
<option value='Dairy' selected>Dairy</option>
<option value='Fruit'>Fruit</option>
<option value='Meat'>Meat</option>
<option value='Bread'>Bread</option>
<option value='Gold'>Gold</option>
</select>
<select class='pickbreed' id='d2'>
<option value='Dairy' selected>Dairy</option>
<option value='Fruit'>Fruit</option>
<option value='Meat'>Meat</option>
<option value='Bread'>Bread</option>
<option value='Gold'>Gold</option>
</select>
</div>
<br><button id='cross'>Cross</button><br>Here are the breeds of potential offspring, at 25% chance each:<br>

<table id='restable'>
<tr><td id='s1'></td><td id='s2'></td></tr>
<tr><td id='s3'></td><td id='s4'></td></tr>
</table>

</div>

CSS

.container {text-align:center;}
#mumbreed,#dadbreed {display:inline-block}
.parent {border:1px solid grey;padding:10px;margin:5px;border-radius:5px;display:inline-block;vertical-align:top;}
.parent img {width:240px;height:163px;}
#restable {width:580px;margin-top:10px;border-spacing:5px;}
#restable td {border:1px solid blue;border-radius:5px;padding:5px;text-align:center;}

JavaScript

// when any of the 4 dropdowns are changed, get the values...
// and update mother or father's breed name and image
$('.pickbreed').change(function(){
var m1 = $('#m1').val(); var m2 = $('#m2').val();
var d1 = $('#d1').val(); var d2 = $('#d2').val();

updateParent(m1,m2,'f','mumbreed','mumpic'); updateParent(d1,d2,'m','dadbreed','dadpic');

});

// reusable function, give it the parent's 2 bloodlines
// and the ids of the divs to update with results
function updateParent(b1,b2,sex,namediv,imgdiv){
var breed = '?';
if(b1 == 'Basic' && b2 == 'Basic'){breed = 'Aquila';}
if(b1 == 'Mystic' && b2 == 'Mystic'){breed = 'Minoan';}
if(b1 == 'Heraldic' && b2 == 'Heraldic'){breed = 'Rampant';}
if((b1 == 'Basic' && b2 == 'Mystic') || (b1 == 'Mystic' && b2 == 'Basic')){breed = 'Opinicus';}
if((b1 == 'Persian' && b2 == 'Mystic') || (b1 == 'Mystic' && b2 == 'Persian')){breed = 'Achaemenid';}
if((b1 == 'Heraldic' && b2 == 'Mystic') || (b1 == 'Mystic' && b2 == 'Heraldic')){breed = 'Heramin';}
if((b1 == 'Basic' && b2 == 'Heraldic') || (b1 == 'Heraldic' && b2 == 'Basic')){breed = 'Griferald';}
if((b1 == 'Basic' && b2 == 'Persian') || (b1 == 'Persian' && b2 == 'Basic')){breed = 'Frizzle';}
if((b1 == 'Persian' && b2 == 'Heraldic') || (b1 == 'Heraldic' && b2 == 'Persian')){breed = 'Kawa';}
if(b1 == 'Persian' && b2 == 'Persian'){breed = 'Marlik';}

$('#'+namediv).html('<b>'+breed+'</b>');
$('#'+imgdiv).html("<img src='http://griffusion.elementfx.com/pics/newart/"+breed+"/"+sex+"/4/line.png' style='width:240px;height:163px;'>");

}

// when button is clicked, cross the bloodlines and update table
$('#cross').click(function(){
var m1 = $('#m1').val(); var m2 = $('#m2').val();
var d1 = $('#d1').val(); var d2 = $('#d2').val();

mixBreed(m1,d1,'s1'); mixBreed(m2,d1,'s2'); mixBreed(m1,d2,'s3'); mixBreed(m2,d2,'s4');

});

// reusable function. Give it the 2 parts and the table cell to update
function mixBreed(blood1,blood2,cell){
var b1 = blood1; var b2 = blood2; var breed = '?';

if(b1 ==...