I am having a hard time getting the closest input to the button clicked. Everything is on the same table cell. The button is inside a span and the input is inside 3 level span? Please see for reference

<td colspan="1" rowspan="1" data-record-id="9" class="r-field-number    " data-field="miles" data-cellid="grid_cell_field7" data-pageid="1" data-signal-error-for="miles9">
<span data-itemtype="grid_field" data-itemid="simple_grid_field10" data-pageid="1" data-record-id="9" data-field="miles" data-fieldname="miles" data-default-width="" data-editcontrol="">
    <span id="edit9_miles">
        <span id="edit9_miles_0" class="bs-ctrlspan ">
            <input id="value_miles_9" class="form-control" type="text" name="value_miles_9" placeholder="" value="">
        </span>
    </span>
</span>
 
<span data-itemtype="text" data-itemid="text2" data-pageid="1" data-record-id="9" data-small=""> 
    <a href="#" data-id="8541" class="btn btn-sm btn-primary get-miles">Get Miles</a>
</span>
</td>

I have tried

var input_id = $(this).closest('input').attr('id');
var input_id = $(this).closest('span').find('input').attr('id');

No luck, any help is greatly appreciate it