jQuery .next() when in a table - php

Question

Trying to do some calc work with a dynamic table.
I have a table which uses a PHP for loop to create 2 rows with text inputs for the amount of days in the month.
I then need to take the first text input, and multiply it by 0.25 and show the result in the text input next to it.
Everything works, but cant get it to select the next text input.
This is the current:
$(".miles-input").on('keyup', function(){
var fuel_cost = $('.fuel_cost').val();
fuel_cost = parseFloat(fuel_cost);
var miles = $(this).val();
$('.price').val('£' +miles*fuel_cost);
});
The table when created created looks like:
<td><input type="text" class="miles-input"></td>
<td><input type="text" class="price"></td>
What I currently have changes all of the price inputs (of course) but no matter what I try I cannot get only the next input to change.
I have tried:
miles.next('.price').val('£' +miles*fuel_cost);
miles.closest('.price').val('£' +miles*fuel_cost);
Heres a jsFiddle:
http://jsfiddle.net/cd7t3ohn/
etc but none work. What is the correct way?

Answer 1

You can use:
$(this).parents("tr:first").find(".price:first").val('£' + (miles*fuel_cost));
It is not the best answer, but it will work. It will get you at the parent tr and then finding the first .price class.

Answer 2

miles is a String. Use this as your reference instead
$(this).next('.price').val('£' +miles*fuel_cost);

Answer 3

Try this:
$(function () {
$(".miles-input").on('keyup', function () {
var fuel_cost = $('.fuel_cost').val();
fuel_cost = parseFloat(fuel_cost);
var miles = $(this).val();
$(this).closest("tr").find(".price").val('£' + miles * fuel_cost);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
Fuel cost:
<input type='text' class='fuel_cost' value='0.25'>
<br>
<br>
<table style="width:500px">
<tr>
<td>Date</td>
<td>Miles</td>
<td>Cost</td>
</tr>
<tr class="input">
<td>1 / 2 / 2015</td>
<td>
<input type='text' class='miles-input' />
</td>
<td>
<input type='text' class='price' />
</td>
</tr>
<tr>
<td>1 / 2 / 2015</td>
<td>
<input type='text' class='miles-input'/>
</td>
<td>
<input type='text' class='price'/>
</td>
</tr>
</table>

Answer 4

my 5 cents
$(this).parent() // get <tr>
.next() // next row
.children('.price') // <td> with price
.etc...