How can I show or hide specific element in Javascript?

Question

i have wp theme that im modifying to add children age to it each room would have adults , kids & kid age screenshot

this code below is the table fetch how many room there is & show each input type for each room

<tbody>
                    <?php foreach ( $room_ids as $room_id => $available_rooms ) :
                        $max_adults = get_post_meta( $room_id, '_room_max_adults', true );
                        $max_kids = get_post_meta( $room_id, '_room_max_kids', true );
                        if ( empty( $max_adults ) || ! is_numeric( $max_adults ) ) $max_adults = 0;
                        if ( empty( $max_kids ) || ! is_numeric( $max_kids ) ) $max_kids = 0;
                    ?>
                        <tr>
                            <td>
                                <div class="thumb_cart">
                                    <a href="#" data-toggle="modal" data-target="#room-<?php echo esc_attr( $room_id ) ?>"><?php echo get_the_post_thumbnail( $room_id, 'thumbnail' ); ?></a>
                                </div>
                                 <span class="item_cart"><a href="#" data-toggle="modal" data-target="#room-<?php echo esc_attr( $room_id ) ?>"><?php echo esc_html( get_the_title( $room_id ) ); ?></a></span>
                                 <input type="hidden" name="room_type_id[]" value="<?php echo esc_attr( $room_id ) ?>">
                            </td>
                            <td>
                                <div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms ) ?>">
                                    <input type="text" class="qty2 form-control room-quantity" name="rooms[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'rooms' ) ) ?>">
                                </div>
                            </td>
                            <td>
                                <div class="numbers-row" data-min="0" <?php if ( ! empty( $max_adults ) ) echo 'data-max="' . esc_attr( $max_adults * $available_rooms ) . '" data-per-room="' . esc_attr( $max_adults ) . '"'; ?>>
                                    <input type="text" class="qty2 form-control room-adults" name="adults[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'adults' ) ) ?>">
                                </div>
                            </td>

                            <td>
                                <?php if ( ! empty( $max_kids ) ) : ?>
                                <div class="numbers-row" data-min="0" data-max="<?php echo esc_attr( $available_rooms * $max_kids ) ?>" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
                                    <input type="text" class="qty2 form-control room-kids" name="kids[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'kids' ) ) ?>">
                                </div>
                            <td>
                                <div class="numbers-row"  data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
                                    <input type="text" id="kid1" class="qty2 form-control room-child_ages1" name="child_ages1[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages1' ) ) ?>">
                                </div>
                                <div class="numbers-row" id="kid2" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
                                    <input type="text" class="qty2 form-control room-child_ages2" name="child_ages2[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages2' ) ) ?>">
                                </div>
                                <div class="numbers-row" id="kid3" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
                                    <input type="text" class="qty2 form-control room-child_ages3" name="child_ages3[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages3' ) ) ?>">
                                </div>
                                <div class="numbers-row" id="kid4" data-min="0" data-max="18" data-per-room="<?php echo esc_attr( $max_kids ) ?>">
                                    <input type="text" class="qty2 form-control room-child_ages4" name="child_ages4[<?php echo esc_attr( $room_id ) ?>]" value="<?php echo esc_attr( $cart->get_room_field( $uid, $room_id, 'child_ages4' ) ) ?>">
                                </div>
                                <?php endif; ?>
                            </td>
                            <td><strong><?php $total = $cart->get_room_field( $uid, $room_id, 'total' ); if ( ! empty( $total ) ) echo ct_price( $cart->get_room_field( $uid, $room_id, 'total' ) ) ?></strong></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>

what im trying to add is an way on how to show/hide children age depending on how many kids there is i made this javascript

$('.room-kids').change(function(){

        var $quantity = $(this).closest('tr').find('.room-quantity');
        var kids = parseInt($(this).val(),10);


        var max_kids = 0;
        if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
            if (kids >= 1) {
        $("#kid1").show("fast");

        }else{
             $("#kid1").hide("fast");
        }
        if (kids >= 2) {
        $("#kid2").show("fast");
        }else{
             $("#kid2").hide("fast");
        }
        if (kids >= 3) {
        $("#kid3").show("fast");
        }else{
             $("#kid3").hide("fast");
        }
        if (kids >= 4) {
        $("#kid4").show("fast");
        }else{
             $("#kid4").hide("fast");
        }
            max_kids = $(this).parent('.numbers-row').data('per-room');
            if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );   
        }
    });

my problem is when i change kids on any other row it affect children age of the first row instead of it's own row

Answer 1

 $('.room-kids').change(function(){

    var $quantity = $(this).closest('tr').find('.room-quantity');
    var kids = parseInt($(this).val(),10);


    var max_kids = 0;
    if ( $(this).parent('.numbers-row').attr('data-per-room') ) {
        if (kids == 1) {
    $("#kid1").show("fast");

    }else{
         $("#kid1").hide("fast");
    }
    if (kids == 2) {
    $("#kid2").show("fast");
    }else{
         $("#kid2").hide("fast");
    }
    if (kids == 3) {
    $("#kid3").show("fast");
    }else{
         $("#kid3").hide("fast");
    }
    if (kids == 4) {
    $("#kid4").show("fast");
    }else{
         $("#kid4").hide("fast");
    }
        max_kids = $(this).parent('.numbers-row').data('per-room');
        if ( ( max_kids * $quantity.val() < kids ) ) $quantity.val( Math.ceil(kids / max_kids) );   
    }
});