Clone inputs by changing the id of each cloned item

Question

My code is not working, I need to clone All items that are inside the origin div and change the id of each item.

I’ve tried several ways but I haven’t been able to solve the problem.

Would anyone know how to solve this?

<div id="origem">
                        <div class="col-sm-3">
                            <label class="example-title">{{ trans('app.contato')}} <span class="spancolor">*</span></label>
                            <select ng-model="contatos[]" id="contato" class="form-control" name="contatos[]" required ng-init="contatos = '{{ old('contatos') }}'">
                                <option value="">{{ trans('app.select_contato')}} </option> 
                                @foreach($contato as $data)
                                    <option value="{{$data->email}}">{{$data->email}}</option>
                                @endforeach
                            </select>


                        </div>
                        <div class="col-sm-3">
                            <label class="example-title">{{ trans('app.cc')}}</label>
                            <select ng-model="cc[]" id="cc" class="form-control" name="cc[]" required ng-init="cc = '{{ old('cc') }}'">
                            <option value="">{{ trans('app.select_cc')}} </option>  
                            @foreach($contato as $data)
                                <option value="{{$data->email}}">{{$data->email}}</option>
                            @endforeach
                            </select>


                        </div>
                        <div class="col-sm-5">



                            <div class="form-group" height="10">
                            <label class="example-title">{{ trans('app.obscontatos')}}</label>{{ trans('app.obscontatos2')}}
                                <select class="form-control" id="obscontato" multiple="multiple" ng-model="obscontatos[]" name="obscontatos[]" id="obscontatos" required ng-init="obscontato = '{{ old('obscontato') }}'">
                                    @foreach($obscontatos as $data)
                                        <option value="{{$data->texto}}">{{$data->texto}}</option>
                                    @endforeach
                                </select>
                            </div>



                        </div>
                        <div class="col-sm-1" style="text-align: center; margin-top:2%;">
                            <button type="button" class="btn btn-icon btn-primary btn-round" style="color:white;" onclick="duplicarCampos();"><i class="icon wb-plus" aria-hidden="true" ></i></button>
                            <button type="button" class="btn btn-icon btn-primary btn-round" style="color:white;" onclick="removerCampos(this);"><i class="icon wb-minus" aria-hidden="true" ></i></button>
                        </div>
                        </div>
                        <div id="destino"></div>


                    </div>

Duplicate and remove functions

function duplicarCampos(){
            j++;
            var select = document.getElementById('origem');
            var clone = select.cloneNode(true);
            clone.setAttribute("id", "origem" + j);
            document.getElementById("contato").setAttribute("id","contato" +j);
            document.getElementById("cc").setAttribute("id","cc" +j);
            document.getElementById("obscontato").setAttribute("id","obscontato" +j);
            document.getElementById("destino").appendChild(clone);
            console.log(clone);

            var arraycontatos = [];
            var arraycc = [];
            var arrayobscontatos = [];

            arraycontatos[j]=$('#contato').val();
            arraycc[j]=$('#cc').val();
            arrayobscontatos[j]=$('#obscontato').val();

            console.log(arraycontatos);
            console.log(arraycc);
            console.log(arrayobscontatos);



        }


    function removerCampos(){
        var select = document.getElementById('destino');
        select.removeChild(select.lastChild);
    }

Answer 1

In function duplicarCampos you need to set the variable data clone instead of document, see below:

function duplicarCampos(){
    j++;
    var select = document.getElementById('origem');
    var clone = select.cloneNode(true);
    var newId = "origem" + j;
    clone.setAttribute("id", newId);
    clone.getElementsByTagName('select')[0].id = "contato" + j;
    clone.getElementsByTagName('select')[1].id = "cc" + j;
    clone.getElementsByTagName('select')[2].id = "obscontato" + j;

    document.getElementById("destino").appendChild(clone);
    console.log(clone);

    var arraycontatos = [];
    var arraycc = [];
    var arrayobscontatos = [];

    arraycontatos[j]=$('#contato').val();
    arraycc[j]=$('#cc').val();
    arrayobscontatos[j]=$('#obscontato').val();

    console.log(arraycontatos);
    console.log(arraycc);
    console.log(arrayobscontatos);
}