How to limit the scope of functions to currently clicked selector or form group?

  javascript, jquery, laravel

Dealing with some legacy code here and my Jquery is a tad rusty.

I’ve got duplicated form segments (multiple possible hotel bookings for one guest) and I want to limit the jquery actions to the one form I’m in right now.

Current JS Function:

$( '.hotel-information' ).on( 'change', '[name="confirmation-status"]', function(){
    // Reset
    $( '.confirmed-number' ).addClass( 'hidden' );
    if( $( this ).val() == 2 && ! $( this ).hasClass( 'disabled' ) )
        $( '.confirmed-number' ).removeClass( 'hidden' );
    if( $( this ).hasClass( 'disabled' ) ) {
        $( '#must-choose-first' ).fadeIn().removeClass( 'hidden' );
        setTimeout( function(){ $( '#must-choose-first' ).fadeOut() }, 5000 );
    }
    if( $( this ).val() > 0 && ! $( this ).hasClass( 'disabled' ) ){
        $( '[name="hotel-name"]' ).prop( 'disabled', true );
        $( '[name="hotel-check-in"]' ).prop( 'disabled', true );
        $( '[name="hotel-check-out"]' ).prop( 'disabled', true );
    } else {
        $( '[name="hotel-name"]' ).prop( 'disabled', false );
        $( '[name="hotel-check-in"]' ).prop( 'disabled', false );
        $( '[name="hotel-check-out"]' ).prop( 'disabled', false );
    }
});

Being that there are multiple (an unknown amount) of hotel bookings, these form fields are duplicated. How can I limit the scope of the above JS function so that I’m only dealing with the fields under that specific .hotel-information I am dealing with?

If it helps, it’s a laravel blade template file that this is being generated with.

Source: Laravel

Leave a Reply