I have a problem with disappearing "dynamic" form fields! (html + jquery) - html

Question

I am currently working on a form, within a modal.
My objective is to implement dynamic fields that the user can add and remove.
*its also worth mentioning that the value of these "dynamic fields" later will be exported to a
firebase database!
For now the fields show up but, when i execute the delete/remove function to a recently
added field everything disapears.
This is the html section
<div class="bg-modal">
<div class="modal-contents">
<div class="close li:hoover">+</div>
<!-- validation todo -->
<form class="input-modal" id="kundInfo">
<br>
<input class="input-modal" type="text" placeholder="name" id="userName" required>
<input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>
<textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>
<select class="input-modal" id="deliveryTown" value="">
<option value="default">Välj leveransort</option>
<option value="Stockholm">Stockholm</option>
<option value="Göteborg">Göteborg</option>
<option value="Kalmar">Kalmar</option>
</select>
<br>
<div id="dynamic-items">
<input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">
<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">
<input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
<!-- (original submit button)
<input type="submit" value="submit">
-->
</div>
<br>
<select class="input-modal" id="produktKategori" value="">
<option value="default">Välj inköpskategori</option>
<option value="trävaror">Trävaror</option>
<option value="mur&puts">Mur & puts</option>
<option value="mark&trädgård">Mark & trädgård</option>
<option value="vvs">VVS</option>
<option value="våtrum">Våtrum</option>
<option value="verktyg">Verktyg</option>
</select>
<br>
<br>
<button class="input-modal" id="Skicka" type="submit">Skicka</button>
</form>
<div class="alert">Ditt förfrågan är skickad!</div>
</div>
</div>
...and this is the jquery file:
$(document).ready(function(){
$("#add").click(function (e){
event.preventDefault()
$('#dynamic-items').append(
'<input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">'+
'<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">'+
'<input type="button" name="delete[]" value="delete" id="delete"/></div>'
);
});
$('body').on('click', '#delete',function (e){
event.preventDefault()
$(this).parent('div').remove();
});
});

Answer 1

The html string not have <div> on start.
$(document).ready(function() {
$("#add").click(function(e) {
event.preventDefault()
$('#dynamic-items').append(
'<div><input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">' +
'<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">' +
'<input type="button" name="delete[]" value="delete" id="delete"/></div>'
);
});
$('body').on('click', '#delete', function(e) {
event.preventDefault()
$(this).parent('div').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-modal">
<div class="modal-contents">
<div class="close li:hoover">+</div>
<!-- validation todo -->
<form class="input-modal" id="kundInfo">
<br>
<input class="input-modal" type="text" placeholder="name" id="userName" required>
<input class="input-modal" type="email" placeholder="e-mail" id="userEmail" required>
<textarea class="input-modal" name="meddelande" placeholder="Övrig information" id="userMessage"></textarea>
<select class="input-modal" id="deliveryTown" value="">
<option value="default">Välj leveransort</option>
<option value="Stockholm">Stockholm</option>
<option value="Göteborg">Göteborg</option>
<option value="Kalmar">Kalmar</option>
</select>
<br>
<div id="dynamic-items">
<input class="dynamic-input-fields" type="text" name="artikel[]" placeholder="Artikel">
<input class="dynamic-input-fields" type="number" name="kvantitet[]" placeholder="kvantitet">
<input class="dynamic-input-fields" type="button" value="Lägg till" id="add">
<!-- (original submit button)
<input type="submit" value="submit">
-->
</div>
<br>
<select class="input-modal" id="produktKategori" value="">
<option value="default">Välj inköpskategori</option>
<option value="trävaror">Trävaror</option>
<option value="mur&puts">Mur & puts</option>
<option value="mark&trädgård">Mark & trädgård</option>
<option value="vvs">VVS</option>
<option value="våtrum">Våtrum</option>
<option value="verktyg">Verktyg</option>
</select>
<br>
<br>
<button class="input-modal" id="Skicka" type="submit">Skicka</button>
</form>
<div class="alert">Ditt förfrågan är skickad!</div>
</div>
</div>