HTML - CHECK DINAMICOS

Hola, tengo un problema que no hallo solución, tengo creado check dinámicos quiero que al hacer click me aparezca el div que esta oculto, pero al mostrar por consola el div me sale nulo.

ESTE ES MI CÓDIGO PHP

echo "<h3 class='categoria'><input type='checkbox' class='categoria-checkbox' id='categoria' name='categoria[]' value='.$categoria_id.' >$categoria_nombre</h3>";
echo "<div id='subcategorias-' . urlencode($categoria_id) . '' >";

Y ESTE MI JS

document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('.categoria-checkbox');
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('click', function() {
var categoria = this.value;
var divSubcategorias = document.getElementById('subcategorias-' + encodeURIComponent(categoria));
console.log(categoria);
console.log(divSubcategorias);
// Muestra u oculta el div de subcategorías según el estado del checkbox
if (this.checked) {
divSubcategorias.style.display = 'block';
} else {
divSubcategorias.style.display = 'none';
}
});
});
});


pero no funciona xq el div no se muestra y al verlo por consola me sale que el divSubcategorias es nulo

Pueden ayudarme con eso, nose como solucionarlo

Bienvenida al foro, por favor dele una leída a este post Como formular UNA BUENA PREGUNTA para obtener ayuda más rápido en LWP

En tu código, la siguiente línea:
el id es "subcategorias-" y no la concatenación que pretendes.
Puedes comprobarlo mirando el código fuente en el navegador (Ctrl+U).