Show input when checking checkbox

Question

I would like that when I check the checkbox, the input in front of you becomes visible, I found a function that partially solved the problem:

//capturando evento de click e touch(mobile) em todos os checkboxs
$('input[type="checkbox"]').on('click touchstart', function(){
    //capturando a quantidade de checkboxs checados
    let quantCheck = $('input[type="checkbox"]:checked').length;

    /*verificando se o número de itens checados é diferente
     de zero para então mostrar o botão*/
    if(quantCheck != 0) {
        $('#botao').css('display', 'block')
    } 
    else {
        $('#botao').css('display', 'none')
    }
});

#botao{
    display: none;
}

<td><input type="checkbox"> <input type="number" id="botao"></td>

However, I will not only use a checkbox and input, but several, because they will be within a table, and because it is an id, it can only be used once, so I thought for each record in the table, it would be the name boot + registry id, example: id="botao1", id="botao2", id="botao3" on... Then I tried to make the following change in the code, but without success:

$('input[type="checkbox"]').on('click touchstart', function(){
                let quantCheck = $('input[type="checkbox"]:checked').length;

                if(quantCheck != 0) {

                <?php
                foreach ($pdo->query($sql) as $row) {
                    ?>
                    $('#botao<?php echo $row['id']; ?>').css('display', 'block')
                <?php } ?>
                }

                else {
                <?php
                foreach ($pdo->query($sql) as $row) {
                    ?>
                    $('#botao<?php echo $row['id']; ?>').css('display', 'none')
                <?php } ?>
                }

                });

<?php
    foreach ($pdo->query($sql) as $row) {
        ?>
                    #botao<?php echo $row['id']; ?>{
                        display: none;
                    }
    <?php } ?>

<td><input type="checkbox"> <input type="number" id="botao<?php echo $row['id']; ?>"></td>

What is happening: Now that it is with several checkbox and input, when checking any checkbox, appears all, and it is to appear only what is ahead of the checkbox marked. I believe it’s because, in function, you’re taking type="checkbox", that is, any checkbox will make all appear, I think it will be necessary to also filter by checkbox id, as I did with the inputs, however as I will do this?

Answer 1

I made some modifications to your code, no need to worry about id or class in this example, just use the element clicked and grab your parent element, in case td and take the child element of that parent you want visible, in this case the selector input[type="number"]:

    // capturando evento de click e touch(mobile) em todos os checkboxs
    $('input[type="checkbox"]').on('click touchstart', function() {
        /* verificando se o checkbox clicado está marcado para então mostrar o botão */
        if (this.checked) {
            $(this) // checkbox clicado
                .parent('td') // elemento td que contém o checkbox
                .find('input[type="number"]') // input type text para exibir ou ocultar
                .show(); // exibe
        } else {
            $(this).parent('td').find('input[type="number"]').hide();
        }
    });

    input[type="number"] {
        display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td><input type="checkbox"> <input type="number"></td>
    </tr>
    <tr>
        <td><input type="checkbox"> <input type="number"></td>
    </tr>
    <tr>
        <td><input type="checkbox"> <input type="number"></td>
    </tr>
</table>