change attr of next('input') failing

I'm trying to set the next input in the dom to read only but am going wrong.

Heres the jQuery:

$('select.expense-code').change(function(e) {

    // If expense code is travel mileage
    if ($(this).val() == '5') {
        // Set miles to read only
        var currentRowAmount = $(e.target).next("input.amount");
        currentRowAmount.attr('readonly', true);
    }

});

Heres that part of the dom:

I've tried just setting the bg colour etc but nothing works, I'm sure its down to the .next() bit but need a prod in the right direction. Console.log() just gives you [].

Thanks in advance

.next() grabs the immediate next sibling, it doesn't search for anything, the filter argument is just to make sure that the next sibling is within the filter.

from the docs:

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Since you already have id on the target, you can just do:

// current id ($(this).prop('id')) is Expense0ExpenseCode
var curId = $(this).prop('id');

// you are targetting Expense0Amount, which has the same Expense0 as the prefix
// so replace the suffix (ExpenseCode -> Amount):
var targetId = curId.replace('ExpenseCode', 'Amount');

// do the prop change
$('#' + targetId).prop('readonly', true);

The one liner:

$('#' + $(this).prop('id').replace('ExpenseCode', 'Amount')).prop('readonly', true);