javascript - Use inputs multiple times -

i have 3 input fields type:number called separately when pushed on button. instance, click on button1 dialog1 appears , on.. want in code behind (jquery) value number input , place in <div class="total-price"></div>

<div id="dialog1">     <h2>product 1</h2>     <input type="number" class="col-md-4 amount" id="amount" min="0" max="10" step="1" value="0">     <div class="total-price">total:</div> </div>  <div id="dialog2">     <h2>product 1</h2>     <input type="number" class="col-md-4 amount" id="amount" min="0" max="10" step="1" value="0">     <div class="total-price">total:</div> </div>  <div id="dialog3">     <h2>product 1</h2>     <input type="number" class="col-md-4 amount" id="amount" min="0" max="10" step="1" value="0">     <div class="total-price">total:</div> </div> 

jquery

  $(".amount").change(function(){     price = 9.99;     amount = $(".amount").val()     total = price * amount;     $(".total-price").html("totaal: € " + total);   }); 

this works fine, changes .total-price divs... work id i'm not here id="amount1", id="amount2", id="amount3"

that's messy.

try .siblings() , change $('.amount').val() $(this).val() (to value of input being referred to)

  $(".amount").change(function(){     price = 9.99;     amount = $(this).val()     total = price * amount;     $(this).siblings(".total-price").html("totaal: € " + total);   }); 

$(".amount").change(function(){      price = 9.99;      amount = $(this).val()      total = price * amount;      $(this).siblings(".total-price").html("totaal: € " + total);    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="dialog1">      <h2>product 1</h2>      <input type="number" class="col-md-4 amount" id="amount" min="0" max="10" step="1" value="0">      <div class="total-price">total:</div>  </div>    <div id="dialog2">      <h2>product 1</h2>      <input type="number" class="col-md-4 amount" id="amount" min="0" max="10" step="1" value="0">      <div class="total-price">total:</div>  </div>    <div id="dialog3">      <h2>product 1</h2>      <input type="number" class="col-md-4 amount" id="amount" min="0" max="10" step="1" value="0">      <div class="total-price">total:</div>  </div>