Aus-einklappen + dynamisch Felder hinzufügen

[DHelm]

Hallo zusammen,

In meinem Code möchte ich dynamisch Felder hinzufügen, welche auch ein und ausklappbar sind - aktuell wird sobald ich auf "löschen" klicke, werden ALLE zuvor hinzugefügten input Felder gelöscht, das soll natürlich nicht so sein, sondern die Felder gelöscht werden bei denen der Löschen-Button geklickt wurde

HTML Code:
<div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="inputEmploymentTitle"></label>
                                    <input type="text" name="employmentTitle[]" class="form-control"
                                        id="inputEmploymentTitle" onkeyup="showEmploymentTitle()" placeholder="Titel" />
                                    <span class="border"></span>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="inputEmploymentDauer"></label>
                                    <input type="text" name="employmentDauer[]" class="form-control"
                                        id="inputEmploymentDauer" onkeyup="showEmploymentDauer()" placeholder="Dauer" />
                                    <span class="border"></span>
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="inputEmployment"></label>
                                    <textarea type="text" name="employment[]" class="form-control" id="inputEmployment"
                                        onkeyup="showEmployment()" placeholder="mehr Informationen"></textarea>
                                </div>
                            </div>
                            <div class="container1">

                            </div>
                        <button class="add_form_field_Employment">hinzufügen</button>


JS Code:
 $(document).ready(function () {
        var max_fields = 10;
        var wrapper = $(".container1");
        var add_button = $(".add_form_field_Employment");

        var x = 1;
        $(add_button).click(function (e) {
            e.preventDefault();
            if (x < max_fields) {
                x++;
                $(wrapper).append('<div class="form-row"><div class="form-group col-md-6"><label for="inputEmploymentTitle"></label><input type="text" name="employmentTitle[]" class="form-control" id="inputEmploymentTitle"onkeyup="showEmploymentTitle()" placeholder="Titel" /><span class="border"></span></div><div class="form-group col-md-6"><label for="inputEmploymentDauer"></label><input type="text" name="employmentDauer[]" class="form-control" id="inputEmploymentDauer"onkeyup="showEmploymentDauer()" placeholder="Dauer" /><span class="border"></span></div><div class="form-group col-md-12"><label for="inputEmployment"></label><textarea type="text" name="employment[]" class="form-control" id="inputEmployment"onkeyup="showEmployment()" placeholder="mehr Informationen"></textarea></div></div></div><a href="#" class="delete">entfernen</a>'); //add input box
            } else {
                alert('Maximale Anzahl erreicht')
            }
        });

        $(wrapper).on("click", ".delete", function (e) {
            e.preventDefault();
            $(this).parent('div').remove();
            x--;
        })
    });