El contenedor que debes actualizar es el que tiene la clase "nombres", de lo contrario, se van a sobrescribir los dos existentes con clase "check". Cuando recorres el arreglo con `personas.forEach(function(item) { ... })` no es necesario crear otro ciclo dentro, ni variables adicionales, puedes acceder directamente a `item.nombre`. Finalmente, tanto el checkbox como la etiqueta a agregar deben estar dentro de otro div con clase "check": <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> let personas = [ { "nombre": "María", "genero": "Mujer", "edad": 21 }, { "nombre": "Ernesto", "genero": "Hombre", "edad": 45 }, { "nombre": "María", "genero": "Mujer", "edad": 21 }, { "nombre": "Paco", "genero": "Hombre", "edad": 12 } ]; // Obtener div con clase "nombres", es el que se debe actualizar $check = $('div.nombres'); // Inicializar HTML con contenido original let html = $check.html(); // Recorrer personas personas.forEach(function(item) { // No se requiere otro ciclo, solo asignar directamente los valores // Creando checkbox y etiqueta dentro de contenedor con clase "check" html += '<div class="check"><input class="opcion-input" type="checkbox" value="' + item.nombre + '"><label class="opcion-label" for="' + item.nombre + '">' + item.nombre +'</label></div>'; }); // Actualizar HTML con todos los nombres $check.html(html); <!-- language: lang-html --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nombres"> <div class="check"> <input class="opcion-input" type="checkbox" value="Isabel"> <label class="opcion-label" for="Isabel">Isabel</label> </div> <div class="check"> <input class="opcion-input" type="checkbox" value="Juan"> <label class="opcion-label" for="Juan">Juan</label> </div> </div> <!-- end snippet -->