Multiple calculations, display on same page

Question

Not sure what to call this to be honest but we shall see if you get the point by my question.

I have a table on a standard HTML page and using Javascript/jQuery I have some calculations.

Example:

function addThem() {
    var result;

    result = userInput + 100;
    return result;
}

This is just an example of a simple (uncompleted) function I have. What I want to do is grab a user input and then display the result in a table. So as far as I know I can do this using:

document.getElementById("addThemResult").innerHTML = result;

and the HTML would be:

<td id="addThemResult"></td>

I have done this before and it works. Now my problem is, I will have multiple fields for the same thing but have no idea how to accept multiple user inputs and display them using the same function.

Live Example

I bet im not making much sense so I will try create a little example.

EXAMPLE HERE

HTML:

<table>
    <tr>
        <td></td>
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Money</td>
        <td>
            <input id="money1" />
        </td>
        <td>
            <input id="money2" />
        </td>
    </tr>
    <tr>
        <td>Money Left</td>
        <td id="moneyleft1"></td>
        <td id="moneyleft2"></td>
    </tr>
</table>

Javascript/jQuery:

$(document).ready(function () {
    $('input').keyup(function () {
        cal();
    });
});

function cal() {
    var cal1, result;
    cal1 = parseFloat(document.getElementById("money1").value);

    result = cal1 - 100;
    document.getElementById("moneyleft1").innerHTML = "£" + result;
}

So if we look at the example I made, if you input a value into "money - one" input it will display the result below. What I now want to do is get the result in "money - two" using the second input and using the same function.

How would I go about doing this, please note that what I need to use this for is a lot bigger and has around 6 rows of this.

I hope this made some sense and any help would be great, it maybe a simple thing but I cant seem to get my head around it.

Update:

As I ran into more I needed to do it has changed from what I thought it was. Now there are more inputs and they are pretty much everywhere. Some of them need to be used in the calculations and others will display the result in a field

UPDATE EXAMPLE

As you can see the results will always change no matter what input you type in. I need that to stop and I want to point them where they should go and when they should change.

E.g:

Money = 10000 so the field "cal1" for that column changes. 

If I then type in the miles input:

Miles = 2300 the "cal1" field should not change and "cal2" field should have the result.

I can only think to do it this way but it feels with a cheat.

CHEAT WAY?

So putting class on each of the inputs then keyup on that class.

Edit: I am still not able to get the values from the inputs in the same column. Also I think my "cheat" way will not work.

Update 2:

Right I made a better example, that was my fault because I didn;t explain it as well as it should have been.

In this example you will see that there are multiple inputs but they only work in the first column (due to no knowing how to make the others work). So now I need to get that working in ALL over columns using the same functions.

UPDATE 2 EXAMPE

HTML:

<table>
    <tr>
        <th></th>
        <th>Option1</th>
        <th>Option2</th>
        <th>Option3</th>
        <th>Option4</th>
    </tr>
    <tr>
        <td>Money</td>
        <td>
            <input type="number" id="money" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
    </tr>
    <tr>
        <td>Upfront</td>
        <td>
            <input type="number" id="upfront" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
    </tr>
    <tr>
        <td>Overall Price</td>
        <td id="overallPrice"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Discount</td>
        <td>
            <input type="number" id="discount" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
        <td>
            <input type="number" />
        </td>
    </tr>
    <tr>
        <td>Dicount Price</td>
        <td id="discountPrice"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Javascript/jQuery:

$(document).ready(function () {
    $('input').keyup(function () {
        overallPrice();
        discountPrice();
    });
});

function overallPrice() {
    var cal1, cal2, result;
    cal1 = parseFloat(document.getElementById("money").value);
    cal2 = parseFloat(document.getElementById("upfront").value);
    result = cal1 - cal2;
    document.getElementById("overallPrice").innerHTML = "£" + result;
    return result;
}

function discountPrice() {
    var cal1, cal2, result;
    cal1 = parseFloat(document.getElementById("discount").value);
    cal2 = overallPrice();
    result = cal2 - cal1;
    document.getElementById("discountPrice").innerHTML = "£" + result;
}

Its a little different from my first due to the extra rows with inputs. The answers so far do not make it possible to fill in the second set of inputs in a column.

Note: There will be more then 2 sets of inputs, this is just an example.

Answer 1

this should work for any number of <td>'s .. just that the last table row should have an id.. in my case that is total

...
 <tr id="total">
    <td>Money Left</td>
    <td></td>
    <td></td>
</tr>
....

try this

 $(document).ready(function () {
  $('input').keyup(function () {
     cal(this);
  });
 });

 function cal(obj) {

   var result = parseFloat(obj.value) - 100;
   var tdPos=$(obj).parent().index();
   $('#total').find('td:eq('+tdPos+')').html("£" + result);
}

just incase if you cannot modify the HTML element...without the id , your selector should be

 function cal(obj) {
   var cal1, result;
   cal1 = parseFloat(obj.value);

   result = cal1 - 100;
   var tdPos=$(obj).parent().index();
   //$('#total').find('td:eq('+tdPos+')').html("£" + result);
   //here
   $(obj).closest('tr').next().find('td:eq('+tdPos+')').html("£" + result); 
}

in short

$(document).ready(function () {
 $('input').keyup(function () {
   var result = parseFloat(this.value) - 100;
   var tdPos=$(this).parent().index();
   $('#total').find('td:eq('+tdPos+')').html("£" + result);
 });
});

but i always go with the first id selector one .. performance wise , first one is far better since id selector is fast and don't have to traverse though the DOM elements.

fiddle here

2nd fiddle

fiddle with multiple columns

Answer 2

Use this. And some rules to your IDs :)

$(document).ready(function () {
    $('input').keyup(function () {
        cal($(this));
    });
});

function cal(input) {
    var cal1 = parseFloat(input.val()),
        result = cal1 - 100;
    $('#' + input.attr("id") + "left").html("£" + result);
}

What I suggest here is that you name your result fields like your inputs and append "left". Then you send $(this) as input to your cal function. It will be a reference to the element the keyup event was triggered on. To reference the output/result cell you get the input field's ID and concatenate it with "left".

Hope it helps. Code is untested :)