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" y se puede actualizar directamente, creando el contenedor usandoHTML necesario que se agrega con el método append() de jQuery al salir del ciclo:
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
}
];
// Inicializar nuevo contenido
let 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"
// Agregar contenido directamente
html += $('div.nombres').append('<div class="check"><input class="opcion-input" type="checkbox" value="'
+ item.nombre + '"><label class="opcion-label" for="' + item.nombre + '">'
+ item.nombre +'</label></div>'div>';
});
}// Actualizar nombres
$('div.nombres').append(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>