JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div id='kat_table'>
<TABLE BORDER=0 WIDTH="100%" CELLSPACING=1 CELLPADDING=2 id='sort'>
   <thead>
      <tr>
         <th>Eintrag</th>
         <th>Aktion</th>
      </tr>
   </thead>
   <tbody id='tbody_31' class='katzeile'>
      <tr id='normalline_31'>
         <td>Eintrag 1</td>
         <td>
            <button id='edit_31'>Edit</button>
            <button id='remove_31'>Del</button>
            <button id="sort_">Sort</button>
            <button id='savedeaktiv_31'>Save</button>
         </td>
      </tr>
      <tr id='editline_31' style='display:none'>
         <td><INPUT TYPE=TEXT NAME="edit_orig_31" id="edit_orig_31" value="Eintrag 1"></td>
         <td>
            <button id='edit_31'>Edit</button>
            <button id='remove_31'>Del</button>
            <button id="sort_">Sort</button>
            <button id='save_31' class='fa fa-save fa-fw icon_save_kat'>Save</button>
         </td>
      </tr>
   </tbody>
   <tbody id='tbody_4' class='katzeile'>
      <tr id='normalline_4'>
         <td>Eintrag 2</td>
         <td>
            <button id='edit_4'>Edit</button>
            <button id='remove_4'>Del</button>
            <button id="sort_">Sort</button>
            <button id='savedeaktiv_4'>Save</button>
         </td>
      </tr>
      <tr id='editline_4' style='display:none'>
         <td><INPUT TYPE=TEXT NAME="edit_orig_4" id="edit_orig_4" value="Eintrag 2"></td>
         <td>
            <button id='edit_4'>Edit</button>
            <button id='remove_4'>Del</button>
            <button id="sort_">Sort</button>
            <button id='save_4' class='fa fa-save fa-fw icon_save_kat'>Save</button>
         </td>
      </tr>
   </tbody>
   <tbody id='tbody_10' class='katzeile'>
      <tr id='normalline_10'>
         <td>Eintrag 3</td>
         <td>
            <button id='edit_10'>Edit</button>
            <button id='remove_10'>Del</button>
            <button id="sort_">Sort</button>
            <button id='savedeaktiv_10'>Save</button>
    ...

JavaScript

$(function(){  
$('.katzeile')
   .on('click', 'button', function(event) {
    event.preventDefault();
	//alert(this.id);
	var id = this.id.split('_');

if (id[0] == 'iconSaveNewKat') {
//alert();
$('#sort').append(
'<tbody id="tbody_150" class="katzeile"> \
<tr id="normalline_150"> \
<td>' + $("#neue_kategorie").val() + '</td> \
<td> \
<button id="edit_150">Edit</button> \
<button id="remove_150">Del</button> \
<button id="sort_">Sort</button> \
<button id="save_150">Save</button> \
</td> \
<tr id="editline_150" style="display:none"> \
<td><INPUT TYPE=TEXT class="formularRel_80" NAME="edit_orig_150" id="edit_orig_150" MAXLENGTH=255 placeholder="Kategorie" value=""></td> \
<td> \
<button id="edit_150">Edit</button> \
<button id="remove_150">Del</button> \
<button id="sort_">Sort</button> \
<button id="save_150">Save</button> \
</td> \
</tr> \
</tbody> \
');
   }


 });
 });