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 el contenedor usando el método append() de jQuery:
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
}
];
// 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
$('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>');
});
<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>