¿Cómo oculto objetos en un IF dentro de un bucle FOR en Jquery?

Tengo la siguiente, problematica, tengo que hacer una comparación de un if dentro de un blucle for. El problema? Es con datos de una base de datos y debo hacer que unos botones aparezcan o no, cuando coloque el if dentro del for, el código simplemente me tiraba un error diciendo de que no conocia las ids de los botones y si lo coloco afuera solo agarra la primera columna y no valida el resto

Alguna idea si eso se puede hacer?

Este es mi codigo, el problema empieza justo cuando corre el for. No se como ocultar los botones dentro del ciclo for porque porque tira un error diciendo de que los botones no existen

function buscarAgendaUsuario(){
                var isChecked = document.getElementById('tResultados').checked;
                if(isChecked){
                    Resultados = 1;
                }else{
                    Resultados = 0;
                }
                datos = { 
                    "opcion"  : "buscarAgenda",
                    "id_usuario": $('#Id_usuario').val(),
                    "resultado":Resultados,
                    "fecha_inicio":$('#Fecha_inicio').val(),
                    "fecha_fin":$('#Fecha_fin').val()
                };
                $.ajax({
                    url:'../controllers/perfilClienteController.php',
                    type:'POST',
                    data: datos
                }).done(function(response){
                    var data = JSON.parse(response).respuesta;
                    var msj = JSON.parse(response).msj;
                    var success = JSON.parse(response).success; 
                    html=`
                    <table 
                    class="table table-bordered table-hover" 
                    id="lista">
                        <thead>
                            <tr>
                                <td><strong>Dia</strong></td>
                                <td><strong>Fecha</strong></td>
                                <td><strong>Hora</strong></td>
                                <td><strong>Clase</strong></td>
                                <td><strong>Instructor</strong></td>
                                <td><strong>Sede</strong></td>
                                <td><strong>Sala</strong></td>
                                <td><strong>Opciones</strong></td>
                            </tr>
                        </thead>
                        <tbody>`;
                    if(success){
                        var valores = eval(data);
                        for(i=0;i<valores.length;i++){
                            html+=`
                            <tr>
                                <input type="hidden" id="hora_termino" value="${valores[i]['hora_fin']}"></input>
                                <input type="hidden" id="hora_inicio" value="${valores[i]['hora_inicio']}"></input>
                                <td>${valores[i][0]}</td>
                                <td>${valores[i][1]}</td>
                                <td>${valores[i][2]}-${valores[i][3]}</td>
                                <td>${valores[i][4]}</td>
                                <td>${valores[i][5]} ${valores[i][6]}</td>
                                <td>${valores[i][7]}</td>
                                <td>${valores[i][8]}</td>
                                <td><a id="emitir" target="_blank" href="${valores[i]['url_emision']}">
                                <input id="url_emision" type="button" class="btn btn-outline-success" value="IR A CLASE"></a>
                                <a id="grabada" target="_blank" href="${valores[i]['url_grabada']}">
                                <input id="url_grabada" type="button" class="btn btn-outline-primary" value="CLASE GRABADA"></a>
                                <button id="calificar" class="btn btn-outline-secondary">CALIFICAR</button>
                                <button id="cancelar" class="btn btn-outline-warning"
                                onclick="cancelacionAgenda(${valores[i]['id_clasecliente']})">
                                CANCELAR CLASE
                                </button></td>
                            </tr>`;
                    var hora_inicio = [valores[i]['hora_inicio']];
                    hora_inicio.slice(start, end)
                    html+="</tbody></table>"
                    $("#lista").html(html);
                    var today = new Date();
                    var time = today.getHours() + ":" + today.getMinutes();
                    var outString = hora_inicio.replace(/[:~!@#$%^&*()_|+-=?;:'",.<>{}[]\/]/gi, '');
                    var hora1 = parseInt(outString); 
                    console.log(hora1);
                    var outString2 = time.replace(/[:~!@#$%^&*()_|+-=?;:'",.<>{}[]\/]/gi, '');
                    var hora2 = parseInt(outString2); 
                    console.log(hora2);

                        if(hora2 < hora1){
                        document.getElementById("cancelar").style.display = "true";
                        document.getElementById("grabada").style.display = "none";
                        document.getElementById("calificar").style.display = "none";
                        console.log("Pequeño");
                            }else{ //Si la hora actual es superior a la hora que termina, cambia el boton
                        document.getElementById("url_emision").style.display = "none";
                        document.getElementById("cancelar").style.display = "none";
                        document.getElementById("calificar").style.display = "true";
                        document.getElementById("grabada").style.display = "true";
                        console.log("Grande");
                    }
                    }
                }else{
                    html+=`
                    <tr><td colspan="7">${msj}</td></tr></tbody></table>`;
                    $("#lista").html(html);
                }     
            });
        }

        //funcion de cancelacion para los clientes de la clase, no funciona la parte de la hora
        function cancelacionAgenda(
            id_clasecliente = $("#id_clasecliente").val()){

            event.preventDefault();
                    
            datos = { 
                "opcion":"cancelacionAgenda",
                id_clasecliente
            };
                    
            jQuery.ajax({
                url: '../controllers/clasesController.php',
                type: 'POST',
                data: datos
                        
            }).done(function(data){
                var success = JSON.parse(data).success;
                var msj = JSON.parse(data).msj;
            
                if(success){
                    swal("¡Realizado!", msj, "success").then((value) => {
                        location.reload();
                        //swal("¡Se ha cancelado su clase!", msj, "error");
                    });
                }else{
                    swal("¡Error!", msj, "error");
                }
                        
            });               
        }
        </script>
    {/literal}
{/block}

EDIT: Añadi una forma de comprar las fechas volviendo a todos los valores, int

function cargarElementos() {
  var body = document.getElementsByTagName('body');
  var buttons = '';
  for (var i = 0; i < 4; i++) {
    buttons += '<button id="btn-' + i + '" style="display: none;">Boton ' + (i + 1) + '</button>';

    if (i === 3) {
      /**
        Aqui agregamos nuestros elementos al DOM
      */
      $("#lista").html(buttons);

      // Después de agregar los elementos en el DOM, les asignamos los estilos que deseamos.
      atributosButtons();
    }
  }
}

function atributosButtons() {
  var buttons = $("#lista").children();
  for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    button.style.display = 'flex';
    button.style.border = '1px solid transparent';
    button.style.borderRadius = '3px';
    button.style.margin = '3px';
    if (i % 2 == 0) {
      button.style.color = '#fff';
      button.style.backgroundColor = '#0095ff';
      button.style.boxShadow = 'inset 0 1px 0 0 rgba(255,255,255,0.4)';

    } else {
      button.style.color = '#39739d';
      button.style.backgroundColor = '#e1ecf4';
      button.style.boxShadow = 'inset 0 1px 0 0 rgba(255,255,255,0.7)';
      button.style.borderColor = '#7aa7c7';
    }
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head></head>

<body onload="cargarElementos()">
  <div id="lista"></div>
</body>

</html>