JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<tr>
			<td style="border: none; padding: 0cm">
			<p><input maxlength="3" name="SGK" size="5" style="width: 1.22cm; height: 0.77cm" type="text" /></p>
			</td>
			<td style="; border: none; padding: 0cm">
			<p>1. Produkt für .... euro</p>

			<p><span id="an" onclick="document.getElementById('text1').style.display='block';document.getElementById('an').style.display='none';document.getElementById('zu').style.display='block'" style="cursor:pointer;">aufklappen</span> <span id="zu" onclick="document.getElementById('text1').style.display='none';document.getElementById('an').style.display='block';document.getElementById('zu').style.display='none'" style="display: none;cursor:pointer">zuklappen</span></p>

			<div id="text1" style="display: none">DER TEXT</div>
			</td>
		</tr>
		<tr>
			<td style="border: none; padding: 0cm">
			<p><input maxlength="3" name="G3" size="5" style="width: 1.22cm; height: 0.77cm" type="text" /></p>
			</td>
			<td style="; border: none; padding: 0cm">
			<p>2. Produkt für ....euro</p>

			<p><span id="an2" onclick="document.getElementById('text2').style.display='block';document.getElementById('an2').style.display='none';document.getElementById('zu2').style.display='block'" style="cursor:pointer;">aufklappen</span> <span id="zu2" onclick="document.getElementById('text2').style.display='none';document.getElementById('an2').style.display='block';document.getElementById('zu2').style.display='none'" style="display: none;cursor:pointer">zuklappen</span></p>

			<div id="text2" style="display: none">DER TEXT</div>
			</td>
		</tr>
		<tr>