Show/Hide div if fields as been populated

Question

So I have a form with a repeater field...

<table class="dokan-table">
    <tfoot>
        <tr>
            <th colspan="3">
                <?php
                $file = [
                    'file' => '',
                    'name' => '',
                ];
                ob_start();
                require $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/rey-child/dokan/html-product-download.php';
                $row_html = ob_get_clean();
                ?>
                <a href="#" class="insert-file-row dokan-btn dokan-btn-sm dokan-btn-success" data-row="<?php echo esc_attr( $row_html ); ?>">
                    <?php esc_html_e( 'Add File', 'dokan-lite' ); ?>
                </a>
            </th>
        </tr>
    </tfoot>
    <thead>
        <tr>
            <th><?php esc_html_e( 'Name', 'dokan-lite' ); ?> <span class="tips" title="<?php esc_attr_e( 'This is the name of the download shown to the customer.', 'dokan-lite' ); ?>"><i class=" krafdeck-icon-question-circle"></i></span></th>
            <!-- <th><?php esc_html_e( 'File URL', 'dokan-lite' ); ?> <span class="tips" title="<?php esc_attr_e( 'This is the URL or absolute path to the file which customers will get access to.', 'dokan-lite' ); ?>">[?]</span></th> -->
            <th><?php esc_html_e( '', 'dokan-lite' ); ?></th>
        </tr>
    </thead>
    <tbody>

        <?php
        $downloadable_files = get_post_meta( $post_id, '_downloadable_files', true );

        if ( $downloadable_files ) {
            foreach ( $downloadable_files as $key => $file ) {
                include $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/rey-child/dokan/html-product-download.php';
            }
        }
        ?>
    </tbody>

This code pulls a file called html-product-download.php which contains...

<tr>
    <td>
        <input type="text" id="k-down-check" class="dokan-form-control input_text" placeholder="<?php esc_attr_e( 'File Name', 'dokan-lite' ); ?>" name="_wc_file_names[]" value="<?php echo esc_attr( $file['name'] ); ?>" />

    </td>
    <td>
        <p>
            <input type="text" class="dokan-form-control dokan-w8 input_text wc_file_url" placeholder="https://" name="_wc_file_urls[]" value="<?php echo esc_attr( $file['file'] ); ?>" style="margin-right: 8px;" />
            <a href="#" class="dokan-btn dokan-btn-sm dokan-btn-default upload_file_button" data-choose="<?php esc_attr_e( 'Choose file', 'dokan-lite' ); ?>" data-update="<?php esc_attr_e( 'Insert file URL', 'dokan-lite' ); ?>"><?php echo esc_html( str_replace( ' ', '&nbsp;', __( 'Choose file', 'dokan-lite' ) ) ); ?></a>
        </p>
    </td>

    <td>
        <p>
            <div id="show_hide" class="hide">YES</div>
            <a href="#" class="dokan-btn dokan-btn-sm dokan-btn-danger dokan-product-delete"><span><?php esc_html_e( 'Delete', 'dokan-lite' ); ?></span></a>
        </p>
    </td>
</tr>

I would like to display this div...

<div id="show_hide" class="hide">YES</div>

...when the input field with the id 'k-down-check' is populated with text. The JavaScript/CSS I've used is this...

<script type="text/javascript"> 
jQuery('#k-down-check').on('keyup', function(e) {
    var input = jQuery(this).val();
    input.length ?
    jQuery('#show_hide').show() :
    jQuery('#show_hide').hide();
})
</script>

<style>
.hide {display: none;}
</style>

The problem I am facing is this script works for the first field but not any additional fields in the repeater as they all have the same ID. I'm not really sure what I am missing.

Answer 1

So the problem I was facing was using keyup and change were not triggering the code unless the user edited the field. Users would not be doing this as they use the media library to add files. So I thought I would try ChatGPT to see if the AI could figure this out and it told me to use this code:

      var checkInputInterval = setInterval(function() {
jQuery('.k-down-check').each(function() {
  var input = jQuery(this).val();
  var div = jQuery(this).closest('tr').find('#show_hide');

  if (input.length) {
    div.show();
  } else {
    div.hide();
  }
});}, 1000);

This code works as it checks the input field every one second. Is there a reason I should not use this?