Adding and deleting inputs dynamically

Question

I want to add rows to a formulary that has already been generated dynamically.

Here is what I try to do:

First I generate the view:

 @foreach($items as $item)
                        <div class="form-group col-sm-2">
                        <input type="text" class="form-control" name="item[]" value="{{$item->name}}">
                        </div>
                        <div class="form-group col-sm-1">
                        <button class="btn btn-danger-outline btn-sm" id="deleteitem">
                            <i class="fa fa-trash"></i> Delete
                        </button>
                        </div>
                        <div class="row" id="addrow"></div>
                    @endforeach

What I want is to generate an empty input with its own delete button and same divs.

Here are my 2 attempts.

First with pure Javascript:

        <div class="card-footer">
            <button onclick="addInput(addrow);" type="button" id="addItem" class="btn btn-theme-outline btn-sm"><i class="fa fa-plus"></i>Add item</button>
        </div>

Javascript:

var counter = 0;

function addInput(divName) {

    var inputdiv = document.createElement('div');
    inputdiv.id = "item"+counter;
    inputdiv.className = "form-group col-sm-2";
    inputdiv.innerHTML = "<input type='text' name='myitems[]' class='form-control'>";
    document.getElementById(divName).append(inputdiv);

    var buttondiv= document.createElement('div');
    buttondiv.id = "button"+counter;
    buttondiv.className = "form-group col-sm-1" ;
    buttondiv.innerHTML =  "<button class='btn btn-danger-outline btn-sm'><i class='fa fa-trash'></i> Löschen</button>";
    document.getElementById("item"+counter).append(buttondiv);

    var rowdiv = document.createElement('div');
    rowdiv.id ="row"+counter;
    rowdiv.className = "row";
    document.getElementById("button"+counter).append(rowdiv);

}

This creates divs within eachother which I obviously don't want. Also the new elements are added after the first not the last div.

My second attempt with jQuery:

    <div class="card-footer">
        <button type="button" id="addItem" class="btn btn-theme-outline btn-sm"><i class="fa fa-plus"></i>Add item</button>
    </div>

Javascript:

$(document).ready(function(){
    $("#addItem").click(function(){
        $("#addrow").append("<li>Appended item test</li>");
    });
});

This time I tried a li to test if it would be appended to the last child but instead it is appended to the first.

Any ideas how to append/delete the element in the @foreach every time I click on new item button on the last input?

Answer 1

<div id="group">

@foreach($items as $item)
    <div class="form-group col-sm-2">
    <input type="text" class="form-control" name="item[]" value="{{$item->name}}">
    </div>
    <div class="form-group col-sm-1">
    <button class="btn btn-danger-outline btn-sm" id="deleteitem">
        <i class="fa fa-trash"></i> Delete
    </button>
    </div>
@endforeach

</div> <!-- / #group -->

jQuery:

$(document).ready(function(){
    $("#addItem").click(function(){
        $("#group").append(template);
    });
});

Answer 2

So you're duplicating id='addrow' for each iteration in your loop? You're going to have a bunch of duplicated id's. It's probably appending to the first addrow then breaking. I'd wrap your whole loop in a container, then append to that:

<div id="container">
    @foreach($items as $item)
                    <div class="form-group col-sm-2">
                    <input type="text" class="form-control" name="item[]" value="{{$item->name}}">
                    </div>
                    <div class="form-group col-sm-1">
                    <button class="btn btn-danger-outline btn-sm" id="deleteitem">
                        <i class="fa fa-trash"></i> Delete
                    </button>
                    </div>
                @endforeach
</div>

$(document).ready(function(){
    $("#addItem").click(function(){
        $("#container").append("<li>Appended item test</li>");
    });
});