append divs with result ajax

I´m traying to do each in response ajax and create divs with this data.

My array it´s:

(3) [Array(15), Array(1), {…}]
0: Array(15)
0: {id: 135, id_oferta: 8, id_articulo: 176, articulos: Array(1)}
1: {id: 136, id_oferta: 8, id_articulo: 169, articulos: Array(1)}
2: {id: 137, id_oferta: 8, id_articulo: 40, articulos: Array(1)}
3: {id: 138, id_oferta: 8, id_articulo: 225, articulos: Array(1)}
4: {id: 139, id_oferta: 8, id_articulo: 450, articulos: Array(1)}
5: {id: 140, id_oferta: 8, id_articulo: 124, articulos: Array(1)}
6: {id: 141, id_oferta: 8, id_articulo: 120, articulos: Array(1)}
7: {id: 142, id_oferta: 8, id_articulo: 125, articulos: Array(1)}
8: {id: 143, id_oferta: 8, id_articulo: 124, articulos: Array(1)}
9: {id: 144, id_oferta: 8, id_articulo: 122, articulos: Array(1)}
10: {id: 145, id_oferta: 8, id_articulo: 119, articulos: Array(1)}
11: {id: 146, id_oferta: 8, id_articulo: 126, articulos: Array(1)}
12: {id: 147, id_oferta: 8, id_articulo: 0, articulos: Array(0)}
13: {id: 148, id_oferta: 8, id_articulo: 121, articulos: Array(1)}
14: {id: 149, id_oferta: 8, id_articulo: 859, articulos: Array(1)}
length: 15
[[Prototype]]: Array(0)
1: Array(1)
0: {id: 8, categoria: 'C', valor: '0.50', nombre: 'ARTICULO C + SECUNDARIO  + OBRA B', descripcion: '', …}
length: 1
[[Prototype]]: Array(0)
2:
firstItems: [{…}]
secondItems: [{…}]
thirdFamily: [{…}]
[[Prototype]]: Object
length: 3
[[Prototype]]: Array(0)

i need access to 2 index and i´m doing this to access to this object array:

if(idOffer == 8){
                        $.each(response[2].firstItems, function(index, value){
                            $(".div-bag").append(`
                                <div class="container-offer">
                                    <div class="panel-heading-offer"><span class="ml-3">${value.nombre}</span></div>
                                </div>
                            `);
                            $(".container-offer").append(`
                                <div class="container-offer">
                                    <div class="panel-heading-offer-items row mt-2">
                                        <div class="col-md-1 ml-2">
                                            <input type="checkbox" value="${value.articulos[index].id}">
                                        </div>
                                        <div class="col-md-2 ml-2">
                                            <span>${value.articulos[index].codigo}</span>
                                        </div>
                                        <div class="col-md-4">
                                            <span>${value.articulos[index].nombre}</span>
                                        </div>
                                        <div class="col-md-2">
                                            <span>${value.articulos[index].precio} €</span>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="number" class="form-control" value="1">
                                        </div>
                                    </div>
                                </div>
                            `)
                        });

and this create this div:

but in this array i have secondItems array and thirdItems and i need create same div with items from other arrays but mi result it´s that all content it´s duplicated:

i need to do:

block 1:

item item item

block 2

item item item

block 3

item item item

etc

Thanks for read and help