JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" method="post" enctype="multipart/form-data">
<table style="width: 100%;" id="table">
<tr>
<td style="width: 25%;">Betreff:</td>
<td><input style="width: 100%;" type="text" name="betreff" value="" /></td>
</tr>
<tr>
<td style="width: 25%;">Beschreibung:</td>
<td style="vertical-align: top;"><textarea style="width: 100%; height: 128px;" name="nachricht"></textarea></td>
</tr>
<tr>
<td style="width: 25%;">Computer:</td>
<td><input style="width: 100%;" type="text" id="apc" name="hostname" autocomplete="off"/></td>
</tr>
<tr>
<td style="width: 25%;">Software:</td>
<td style="vertical-align: top;">
<select id="software" name="software" style="width: 100%;" autocomplete="off">
<option value="-1" selected>< Keine Software ></option>
</select>
</td>
</tr>
<tr>
<td style="width: 25%;">Anhang:</td>
<td style="vertical-align: top;"><input type='file' style="width: 70%" name="anhang[]" class="anhang" id="anhang0" multiple/><?=(isset($_POST['anhang']) ? $_POST['anhang'] : '')?><input style="width: 20%; margin-left: 5px" type="button" class="entf" id="entf0" value="Entfernen"/></td>
</tr>
<tr id="fileInput"></tr>
<tr>
<td></td>
<td style="text-align: right;"><input type="button" value="Abbrechen" onclick="location.href='/';" /> <input name="submit" type="submit" value="Ticket einstellen" /></td>
</tr>
</table>
</form>
JavaScript
$(document).ready(function(){
/*
$("#anhang0").on("click", function (e) {
alert("input");
addFileInput();
});*/
$(document.body).on("input", ".anhang", function (e) {
alert("input");
addFileInput();
});
$(document.body).on("click", ".entf", function (e) {
var clickedItem = this.id;
console.log(inputCounter);
if(clickedItem === 'entf0'){
$('#anhang0').val('');
if($('#anhang'+inputCounter).val === ''){
$('#anhang'+inputCounter).parent().parent().remove();
//inputCounter = 0;
}else{
$('#anhang0').parent().parent().remove();
}
}else{
var curFile = clickedItem.charAt(4);
curFile++;
if ($('#entf'+curFile).length > 0) {
$('#'+this.id).parent().parent().remove();
inputCounter--;
}else{
curFile--;
$('#anhang'+curFile).val('');
}
}
});
var inputCounter = 0;
function addFileInput(){
inputCounter++;
$('#fileInput').after('<tr class="datei_anhang"><td style="width: 25%;">Anhang:</td><td><input style="width: 70%" class="anhang" id="anhang'+inputCounter+'" type="file" name="anhang[]" multiple/><input style="width: 20%; margin-left: 5px" type="button" class="entf" id="entf'+inputCounter+'" value="Entfernen"/></td></tr>').insertAfter($('.datei_anhang').last());
}
});