我有以下HTML:

<div class="panel-body">
    <div class="form-group row">
        <label class="col-sm-5 col-form-label">Date</label>
        <div class="col-sm-7">
            <input type="text" class="monthpicker hasDatepicker" id="inputMonth[0]"
                   name="inputMonth[0]" value="30/11/2019" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-5 col-form-label">Expected</label>
        <div class="col-sm-7">
            <input type="text" class="form-control" id="inputCity"
                   name="inputCity[]" value="2750" />
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-5 col-form-label">Costs</label>
        <div class="col-sm-7">
            <input type="text" class="form-control" id="inputCosts"
                   name="inputCosts[]" value="0" />
        </div>
    </div>
</div>

当#InputCity框更改时，我希望能够选择最近的#InputCosts文本。 我使用的代码是:

$(document).on('input', '#inputCity', function() {
    var monthcost = $(this).closest('.panel-heading .form-group row')
                           .find("input[name='inputCosts[]']")
                           .val();  
    console.log(monthcost);
});

找到这个的正确方法是什么？