JavaScript - ayuda con javascript con varias img

<div class="text-center">

    <button type="submit" id="botonF1" value="Mostrar1" onclick="javascript:document.getElementById('f1').style.display='block'; ">Hormigon</button>

    <button type="submit " id="botonF2 " value="Mostrar2 " onclick="javascript:document.getElementById( 'f2').style.display='block'; ">suelo</button>

    <button type="submit" id="botonF3" value="Mostrar3" onclick="javascript:document.getElementById('f3').style.display='block';">viviendas</button>

</div>

<div class="container-fluid">

    <div class="row " id="obras">

        <div id="f1" style="display: none;"></div>

        <div id="f2" style="display: none;"></div>

        <div id="f3" style="display: none;"></div>

    </div>

</div>

<script>

    let f1 = 19; //cantdiad de fotos

    let gallery = document.getElementById('f1');

    for (let i = 1; i <= f1; i++) {

        gallery.innerHTML += '<img class="lazy" src="images/obras/hormigon/' + i + '.jpg">';

    }

    let f2 = 8; //cantdiad de fotos

    let galleria = document.getElementById('f2');

    for (let i = 1; i <= f2; i++) {

        galleria.innerHTML += '<img class="lazy" src="images/obras/civil/' + i + '.jpg">';

    }

    let f3 = 4; //cantdiad de fotos

    let gallerias = document.getElementById('f3');

    for (let i = 1; i <= f3; i++) {

        gallerias.innerHTML += '<img class="lazy" src="images/obras/suelos/' + i + '.jpg">';

    }

</script>

<div class="text-center">

    <button type="submit" id="botonF1" value="Mostrar1" onclick="javascript:mostrarImagenes('hormigon', 19);">Hormigon</button>

    <button type="submit " id="botonF2 " value="Mostrar2 " onclick="javascript:mostrarImagenes('suelo', 8);">suelo</button>

    <button type="submit" id="botonF3" value="Mostrar3" onclick="javascript:mostrarImagenes('viviendas', 4);">viviendas</button>

</div>

<div class="container-fluid">

    <div class="row " id="obras">

        <div id="f1" style="block" ></div>

    </div>

</div>

<script>

    function mostrarImagenes(path, numeroDeImagenes) {

    let gallery = document.getElementById('f1');

    gallery.innerHTML= '';

    for (let i = 1; i <= numeroDeImagenes; i++) {

        gallery.innerHTML += `<img class="lazy" src="images/obras/${path}/${i}.jpg">`;

    }

}

</script>