计算器-显示第一个计算，但第二个不显示

Question

I made a calculator for my website that I am still developing. The first form ends up calculating correctly bu the second form ends up to be always 0.

Here is my code:
HTML

    <div class="col-md-4">
      <div class="CostStone"></div>
      <h2><img src="assets/images/Stone.png" width="64" height="64">Stone</h2>
      <p>Original Price: $100 Per 16 Blocks</p>
      <p style="color:red;">Price With HB Premium: $25 Per 16 Blocks</p>
      <form>
      <input id="StonePrice" type="hidden" value="1.56">
      <input maxlength="4" id="Stone" type="text" class="form-control" placeholder="Quantity Of Items" onkeypress="return isNumberKey(event)"><br>
      <p><button type="submit" class="btn btn-default" >Buy Items</button></p>
      </form>
    </div>
    <div class="col-md-4">
      <div class="CostGrass"></div>
      <h2><img src="assets/images/Grass.png" width="64" height="64">Grass</h2>
      <p>Original Price: $100 Per 48 Blocks</p>
      <p style="color:red;">Price With HB Premium: $50 Per 48 Blocks</p>
      <form id="Grass">
      <input id="GrassPrice" type="hidden" value="1.04">
      <input maxlength="4" type="text" id="Grass" class="form-control" placeholder="Quantity Of Items" onkeypress="return isNumberKey(event)"><br>
      <p><button class="btn btn-default"  type="submit">Buy Items</button></p>
      </form>
   </div>

JS/JQuery

 //Stone
 $("#Stone").on('keyup',function(){
 // alert('pressed')
    var CostStone= $("#StonePrice").val() * $(this).val();
    var CostStone2 = CostStone.toFixed(2);
    $(".CostStone").html("<div class='alert alert-info fade-in'><a class='close'  href='#' data-dismiss='alert'>&times;</a><p>Total Cost: $"+CostStone2+"</p></div>");
});
//End Stone

 //Grass
 $("#Grass").on('keyup',function(){
// alert('pressed')
     var CostGrass= $("#GrassPrice").val() * $(this).val();
    var CostGrass2 = CostGrass.toFixed(2);
      $(".CostGrass").html("<div class='alert alert-info fade-in'><a class='close' href='#' data-dismiss='alert'>&times;</a><p>Total Cost: $"+CostGrass2+"</p></div>");
  });
  //End Grass

Here is a demo:

Demo Of Code

Answer 1

I think this may be caused by the fact that your form has an Id of Grass too. Can you see if changing the id on the form element fixes the issue?

I hope this helps!

Answer 2

This is caused by the fact that your form has the id #Grass assigned to it too. When you call $(this).val() , it's not functioning correctly because you're getting the value from the first element that matches #Grass , which is the form.