We Keep Coding

how to fix 'subraction using jquery'

I am trying to do calculation using jQuery
While subtraction, its always subtracting from the last element
$(".add").click(function(){
$(".sub").val((parseFloat($("#a").val()) - parseFloat($("#paid").val())));
});
$(".add").click(function(){
$(".sub").val((parseFloat($("#b").val()) - parseFloat($("#paid").val())));
});
$(".add").click(function(){
$(".sub").val((parseFloat($("#c").val()) - parseFloat($("#paid").val())));
});
$(".add").click(function(){
$(".sub").val((parseFloat($("#d").val()) - parseFloat($("#paid").val())));
});
<form name="myform">
<input type="button" id="a" value="50">
<input type="button" id="b" value="100">
<input type="button" id="c" value="500">
<input type="button" id="d" value="2000">
</form>
<td><input type="text" name="paid" class="text" id="paid" value="10"/></td>
<td> <input type="button" value = "Calculate" class="add" id="add"></td>
<td><input type="text" class="sub"></td>
when i subtract 10 from 50, it should display 40. but its showing 1990

In your code all the 4 functions are defined inside the add function. When calculate is clicked all functions run one by one and always the value of the ending function is selected. Always subtraction from 2000 takes place due to that always 1990 was the output.
var a;
$('form input').click(function(){a=$(this).val()});
$(".add").click(function(){
$(".sub").val((parseFloat(a)) - parseFloat($("#paid").val()));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myform">
<input type="button" id="a" value="50">
<input type="button" id="b" value="100">
<input type="button" id="c" value="500">
<input type="button" id="d" value="2000">
</form>
<td><input type="text" name="paid" class="text" id="paid" value="10"/></td>
<td> <input type="button" value = "Calculate" class="add" id="add"></td>
<td><input type="text" class="sub"/></td>

This will help :)
var setVal = 0;
$(".add").click(function() {
console.log("clicked", setVal);
$(".sub").val(setVal - parseFloat($("#paid").val()));
setVal = 0;
});
$("form input").click(function() {
setVal = 0;
setVal = this.value;
console.log("setVal--", setVal)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myform">
<input type="button" id="a" value="50">
<input type="button" id="b" value="100">
<input type="button" id="c" value="500">
<input type="button" id="d" value="2000">
</form>
<td><input type="text" name="paid" class="text" id="paid" value="10" /></td>
<td> <input type="button" value="Calculate" class="add" id="add"></td>
<td><input type="text" class="sub"></td>

How to merge arrays from different input values.?

There are many text field with same name and same class with different values and each input have 1 button. I get the value from each one of the fields by clicking on each specific button. Using with Javascript. And i can put that value into array but the arrays are not merge. If i click on 1st button the specific input field value is put into the array, then i click on 3rd button the 1st value in array is removed and the new vlaue (3rd row's value) is stored in array. How can i store all of the values in same array on each click button.
Here is my code.
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
<input type="button" class="clickme" value="Get Value" />
</div>
Here is my javascript
<script type="text/javascript">
//Get the value on button click
var div = $(this).closest('div');
var get_eupdid = div.find('input').val();
alert(get_eupdid);
//Push the value into array.
var array_id = [];
array_id.push(get_eupdid);
console.log( "array_id: " + array_id);
</script>

Try this :Click function not there and declare the array as a global
var array_id = [];
$('.clickme').click(function(){
var get_eupdid= $(this).closest('div').find('input').val();
array_id.push(get_eupdid);
console.log( "array_id: " + array_id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
<input type="button" class="clickme" value="Get Value" />
</div>
<div>
<input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
<input type="button" class="clickme" value="Get Value" />
</div>

I think you should check this out. There's usually no need for <input type='hidden' /> when you can use something else to store the data. Also, it shows you how, with a little bit of CSS, unless you'd like to put something else in those <div>s, how you can do that.
$(function(){
var possible = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'], collection = [];
$('.clickme').each(function(i, e){
$(e).click(function(){
collection.push(possible[i]);
console.log(collection);
});
});
});
.clickme{
display:block;
}
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
</head>
<body>
<div>
<input type='button' class='clickme' value='Get Value' />
<input type='button' class='clickme' value='Get Value' />
<input type='button' class='clickme' value='Get Value' />
<input type='button' class='clickme' value='Get Value' />
<input type='button' class='clickme' value='Get Value' />
</div>
</body>

You need to make array global.Right now you are creating array every time a button is clicked so only current value remain in array
var array_id = [];
$(document).ready(function () {
$(".clickme").click(function () {
var div = $(this).closest('div');
var get_eupdid = div.find('input').val();
alert(get_eupdid);
//Push the value into array.
array_id.push(get_eupdid);
console.log("array_id: " + array_id);
});
});

JavaScript Calculate Button Doesn't Work

This script won't show the calculated total at the end. I can't figure it out! Any suggestions? What am I missing? I have the JavaScript code for the tax function too if that helps. Everything works until I get to the final calculation button.
<H2>Business Card Pricing Calculator</H2>
<P>
<STRONG>Type:</STRONG>
<BR /><BR />
<INPUT id="Horizontal" value="50" type="radio" name="type" />
<LABEL for="Horizontal">Horizontal</LABEL>
<BR />
<INPUT id="vertical" value="50" type="radio" name="type" />
<LABEL for="vertical">Vertical</LABEL>
<BR />
<INPUT id="foldover" value="65" type="radio" name="type" />
<LABEL for="foldover">Foldover</LABEL>
</P>
<P>
<STRONG>Options:</STRONG>
<BR /><BR />
<INPUT id="cutting" value="10" type="checkbox" name="cutting" />
<LABEL for="cutting">Cutting</LABEL>
<BR />
<INPUT id="laminating" value="15" type="checkbox" name="laminating" />
<LABEL for="laminating">Laminating</LABEL>
<BR />
<INPUT id="scoring" value="10" type="checkbox" name="scoring" />
<LABEL for="scoring">Scoring</LABEL>
</P>
<P>
<STRONG>Tax Rate:</STRONG>
<INPUT style="TEXT-ALIGN: right" id="tax_rate" maxLength="5" size="3" type="text"
name="tax_rate" />%
</P>
<P>
<STRONG>Total (Including Tax): </STRONG>
<SPAN id="total_cost"></SPAN>
</P>
<P>
<INPUT id="calculate-button" value="CALCULATE" type="button" />
</P>
JavaScript
$("#calculate-button").click(function () {
var price = 0;
var tax = 0;
var checkedValues = $('input:checked');
$(checkedValues).each(function (index) {
price += parseInt(checkedValues[index].value, 10);
});
tax = (price * $("#tax_rate").val() / 100);
$("#total_cost").html(price + tax);
});

increment or de-increment on button press

The form code:
<td>
<form action="cart.php" method="get">
<input type="button" onclick="buttonSubtract1()" name="subtract1"
value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form>
</td>
The javascript:
var i = 0;
var qty1 = document.getElementById('qty1').value;
function buttonAdd1() {
document.getElementById('qty1').value = ++i;
}
function buttonSubtract1() {
if (qty1 > 0) {
document.getElementById('qty1').value = --i;}
}
I changed the code to increment and de-increment using javascript which worked fine so I tried to make it so that de-incrementation only works if the number is positive but now incrementing is working fine but it is not allowing de-incrementation of any number. Why is this?

<?php if (isset($_GET['subtract1'])) {
$quantity1 = $_GET['$quantity1'];
$quantity1--;
}
?>
<?php if (isset($_GET['add1'])) {
$quantity1 = $_GET['$quantity1'];
$quantity1++;
}
?>
<form action="cart.php" method="get">
<input type="submit" name="subtract1" value="-"/>
<input type="text" size="4" name="$quantity1" value="<?php echo $quantity1 ?>"/>
<input type="submit" name="add1" value="+"/>

Try the following.
Make sure the php code is above the html (so that the data gets processed before you output it) :
<?php
if(isset($_GET['quantity1'])) {
$quantity1 = intval($_GET['quantity1']);
if(isset($_GET['subtract1'])) {
$quantity1--;
} else if (isset($_GET['add1'])) {
$quantity1++;
}
}
?>
<td>
<form action="cart.php" method="get">
<input type="button" name="subtract1" value="-" />
<input type="text" size="4" name="quantity1" value="<?php echo $quantity1; ?>" />
<input type="button" name="add1" value="+" />
<input type="submit" name="product1" value="Add" />
</form>
</td>

My understanding is to get a reference to the object (qty1) then test or change the properties as required. This code seems to do what is required. It sends the appropriate values as the '$_GET' parameters as checked in PHP.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<script type = 'text/javascript'>
var rfvGlobal = {};
function buttonAdd1() {
rfvGlobal.qty1.value++;
}
function buttonSubtract1() {
if (rfvGlobal.qty1.value > 0) {
rfvGlobal.qty1.value--;
}
}
</script>
</head>
<body>
<table>
<td><form action="" method="get">
<input type="button" onclick="buttonSubtract1()" name="subtract1" value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAdd1()" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form></td>
</table>
<script>
rfvGlobal.qty1 = document.getElementById('qty1');
</script>
</body>
</html>

View this working demo
Your problem is that you aren't checking that the element's value, just qty1 which was set on page load but never updated.
function buttonSubtract1() {
var qtyElement = document.getElementById('qty1'); // the element
if (qtyElement.value > 0) qtyElement.value = --i; // if its value at this point in time >0 change it
}
The above fixes your current code, but...
Why don't you write less (this is the only function you need)
function buttonAlter(which, byWhat){
var qtyElement = document.getElementById('qty' + which);
if (byWhat > 0 || qtyElement.value > 0) qtyElement.value = parseInt(qtyElement.value) + byWhat;
}
for more buttons
<form action="cart.php" method="get">
<input type="button" onclick="buttonAlter(1, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty1" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(1, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
<br />
<input type="button" onclick="buttonAlter(2, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty2" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(2, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
<br />
<input type="button" onclick="buttonAlter(3, -1)" name="subtract1" value="-"/>
<input type="text" size="4" id="qty3" name="quantity1" value="0"/>
<input type="button" onclick="buttonAlter(3, 1)" name="add1" value="+"/>
<input type="submit" name="product1" value="Add"/>
</form>
This version's demo

Form field quantity up/down buttons, don't allow negative numbers?

http://jsfiddle.net/KYDPd
Is there a way to make the minimum number be 0, and not allow the user to go below 0 when clicking down?
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="this.form.name.value--;">
</form>

If separate buttons are not necessary and HTML5 is an option you could just use this:
<form>
<input type="number" min="0" name="name" value="0" />
</form>

This should do the trick. Check what the value is before you allow each operation. Also added an onchange to the text input to inforce your minimum 0 requirement. Agree with other answer that this should be in a function though.
http://jsfiddle.net/xqV6V/1/
<form>
<input type="text" name="name" value="0" onchange="if(this.value<0){this.value=0;}" />
<input type="button" value="up" onclick="if(this.form.name.value>=0){this.form.name.value++;}" >
<input type="button" value="down" onclick="if(this.form.name.value>0){this.form.name.value--};">
</form>

You should probably put this JavaScript in a function.
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="this.form.name.value++;" >
<input type="button" value="down" onclick="if(this.form.name.value>0)this.form.name.value--;">
</form>
Additional Answer with functions.
<script>
function ud_find_text(self) {
var children = self.parentNode.getElementsByTagName('input');
for (var i = 0; i < children.length; i++) {
if (children[i].getAttribute('type') == 'text') {
return children[i];
}
}
}
function ud_inc(self) {
var text = ud_find_text(self);
text.value++;
}
function ud_dec(self) {
var text = ud_find_text(self);
if (text.value > 0) text.value--;
}
</script>
<form>
<input type="text" name="name" value="0" />
<input type="button" value="up" onclick="ud_inc(this)" >
<input type="button" value="down" onclick="ud_dec(this)">
</form>