JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
<tr>
					<td colspan='2' class='border1 column2 kopf2'><b>Logistik</b></td>
					<td colspan='1' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='8' class='border1 column2'></td>
					<td colspan='1' class='border1 column2'><img class='logo2' style='height: 40px; padding-left: 10px;' src='pictures/bugeleisen.jpg'/></td>
				</tr>
                <tr id='fmd'>
					<td colspan='2' class='border1 column2 kopf2'><img class='logo2' style='height: 30px;' src='pictures/Damen.gif' alt='Damen'/>&nbsp;<b>Model</b></td>
					<td colspan='1' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='8' class='border1 column2'></td>
					<td colspan='1' class='border1 column2'></td>
				</tr>
                <tr id='fmh'>
					<td colspan='2' class='border1 column2 kopf2'><img class='logo2' style='height: 30px;' src='pictures/Herren.gif' alt='Herren'/>&nbsp;<b>Model</b></td>
					<td colspan='1' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='8' class='border1 column2'></td>
					<td colspan='1' class='border1 column2'></td>
				</tr>
                <tr id='fp'>
					<td colspan='2' class='border1 column2 kopf2'><b>Puppe</b></td>
					<td colspan='1' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='8' class='border1 column2'></td>
					<td colspan='1' class='border1 column2'></td>
				</tr>
                <tr id='ft1'>
					<td colspan='2' class='border1 column2 kopf2'><b>Tisch</b></td>
					<td colspan='1' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='2' class='border1 column2'></td>
					<td colspan='8'...

JavaScript

function modify_all(actions) {
    for (var i=0; i<actions.length; i++) {
        document.getElementById(actions[i][0]).style.display = actions[i][1] ? "" : "none";
    }
}

function update_model() {
    switch (document.getElementById("model_choice").value) {
        case "Alle":
            modify_all([
                ["fmd", true],
                ["fmh", true],
            ]);
            break;
        case "Damen":
            modify_all([
                ["fmd", true],
                ["fmh", false],
            ]);
            break;
        case "Herren":
            modify_all([
                ["fmd", false],
                ["fmh", true],
            ]);
            break;
    }
}

function update() {
    switch(document.getElementById("choice").value) {
        case "Alle":
            modify_all([
                ["fmd", true],
                ["fmh", true],
                ["fp", true],
                ["ft1", true],
                ["ft2", true],
                ["ft3", true],
                ["model_choice", false],
            ]);
            break;
        case "Model":
            modify_all([
                ["fp", false],
                ["ft1", false],
                ["ft2", false],
                ["ft3", false],
                ["model_choice", true],
            ]);
            update_model();
            break;
        case "Puppe":
            modify_all([
                ["fmd", false],
                ["fmh", false],
                ["fp", true],
                ["ft1", false],
                ["ft2", false],
                ["ft3", false],
                ["model_choice", false],
            ]);
            break;
        case "Tisch":
            modify_all([
                ["fmd", false],
                ["fmh", false],
                ["fp", false],
                ["ft1", true],
                ["ft2", true],
                ["ft3", true],
                ["model_choice", false],
            ]);
            break;
       ...