Getting the value of multiple input fields separately onKeyup: Jquery

Question

I am having an input box which allows the user to input a price,

 <div class = "prc-box"><input type="number" class="form-controle" id="oprc" placeholder="$" name="offerPrice" required="required"></div>

Then I am having a form that has multiple fields like below,

        <div class ="cash-section" id ="cash-form">
                <div class ="input-group-custom" id = "mon-deposit">
                    <div class = "deposit-input">
                        <label class="control-label">Earnest Money Deposit Amount (0-50%)</label>
                        <input type="number" min="0" max="50" class="form-control1" onkeyup="getPrice(this)" placeholder="0-50%" name="moneyDep" required="required"><span class="input-val moneyDep">$0</span></div>
                </div>
                <div class ="input-group-custom" id = "req-conc">
                    <div class = "req-input">
                        <label class="control-label">Requested Concessions (0-60%)</label>
                        <input type="number" min="0" max="60" class="form-control2" placeholder="0-60%" name="req-conc" required="required"><span class="input-val req-conc">$0</span></div>
                </div>

                <div class ="input-group-custom" id = "sel-credit">
                    <div class = "sel-input">
                        <label class="control-label">Other Seller Credits (0-50%)</label>
                        <input type="number" class="form-control" placeholder="0-50%" name="sel-credit" required="required"><span class="input-val sel-credit">$0</span></div>
                </div>

                <div class ="input-group-custom" id = "insp-period">
                    <div class = "insp-input">
                        <label class="control-label">Inspection Period (0-60)</label>
                        <input type="number" class="form-control" placeholder="0-60" name="insp-period" required="required"><span class="input-val insp-period">days</span></div>
                </div>

                <div class ="input-group-custom" id = "due-section">
                    <div class = "due-input">
                        <label class="control-label">Due Dilligence Review Period (0-60)</label>
                        <input type="number" class="form-control" placeholder="0-60" name="due-section" required="required"><span class="input-val due-section">days</span></div>
                </div>

                <div class ="input-group-custom" id = "days-count">
                    <div class = "days-input">
                        <label class="control-label">Requested # of Days to Closing (0-120)</label>
                        <input type="number" class="form-control" placeholder="0-120" name="days-count" required="required"><span class="input-val days-count">days</span></div>
                </div>
            </div>

Assume user is entering a value in the first price input box say 50000. Then the user is entering the value in the #insp-period input box as 10. Now the I need to calculate the 10% of the price entered (here 50000) in the first input box and it should be displayed in a span class.

I tried to do the same as below,

function getPrice(price) {

 var offerPrice = jQuery('.form-controle').val();
 var text1 = price.value;
 var result1 = (text1*offerPrice)/100;
 jQuery('.input-val.moneyDep').html(result1);
}

This is working fine when the onkeyup="getPrice(this)" is called from a single input field. How can I make it work for the other input fields as well? I need the input value of each of the text field separately and the initial price input value each time.

How can I achieve this?

Answer 1

Try this:

$(function() {  
  $(".input-group-custom input").keyup(function() {
    var offerPrice = $(this).val();
    var text1 = price.value;
    var result1 = (text1*offerPrice)/100;
    $(this).next().html(result1);
  });
});