We Keep Coding

Get multiple value onchange from multiple input Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 24 days ago.
Improve this question
I'm trying to get every value from the charge field according to type payment. When both price and pay have a value, the charge input field will be filled by pay - price, and the total amount field will be filled when the type payment option was chosen.
In the second situation, when I have more than one form and the same type of payment (for example CASH), it will automatically sum for both charges and display TOTAL AMOUNT DUE CASH.
And this is what I've done
// extend form
const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");
btn.addEventListener("click", (e) => {
e.preventDefault();
const clone = formClone.cloneNode(true);
clone.querySelectorAll("input").forEach((e) => {
e.value = "";
});
parentForm.appendChild(clone);
const deleteForm = document.createElement("button");
deleteForm.innerText = "X";
deleteForm.classList.add("btn", "btn-danger", "btn-sm");
clone.appendChild(deleteForm);
deleteForm.addEventListener("click", (e) => {
e.preventDefault();
e.target.parentElement.remove();
});
});
const payment = document.querySelector(".type-payment");
const price = document.querySelector(".input-price");
const pay = document.querySelector(".input-pay");
const allInputSum = document.querySelectorAll(".sum");
const inputTotal = document.querySelector(".input-total");
let result;
let totalValue;
function handleSelectChange(event) {
result = payment.value;
totalValue = pay.value - price.value;
inputTotal.value = totalValue.toLocaleString();
let inputSum = Array.from(allInputSum).filter((e) => {
if (e.id == result) {
e.value = inputTotal.value;
}
});
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<button id="add-button" class="btn btn-primary mb-3">Add Form</button>
<div class="wrappers">
<div class="row clone mb-2">
<div class="col px-0">
<div class="input-group mb-2">
<input
type="number"
class="form-control rounded-0 input-price"
placeholder="Price"
onchange="handleSelectChange(event)"
/>
</div>
</div>
<div class="col px-0">
<div class="input-group mb-2">
<input
type="number"
class="form-control rounded-0 input-pay"
placeholder="Pay"
onchange="handleSelectChange(event)"
/>
</div>
</div>
<div class="col-auto px-0">
<div class="input-group mb-2">
<select
class="form-control rounded-0 type-payment"
role="button"
onchange="handleSelectChange(event)"
>
<option value="CASH">CASH</option>
<option value="DEBIT">DEBIT</option>
<option value="CASHLESS">CASHLESS</option>
</select>
</div>
</div>
<div class="col px-0">
<div class="input-group mb-2">
<input
onchange="handleSelectChange(event)"
value="0.00"
type="text"
class="form-control rounded-0 input-total"
disabled
/>
</div>
</div>
</div>
</div>
<div class="pt-4">
<div class="row">
<div class="col-md-8 pr-0">
<input
class="form-control total rounded-0"
disabled
placeholder="TOTAL CASH"
/>
</div>
<div class="col-md-4 pl-0">
<input
id="CASH"
class="form-control rounded-0 sum"
disabled
placeholder="0.00"
/>
</div>
</div>
<div class="row">
<div class="col-md-8 pr-0">
<input
class="form-control total rounded-0"
disabled
placeholder="TOTAL DEBIT"
/>
</div>
<div class="col-md-4 pl-0">
<input
id="DEBIT"
class="form-control rounded-0 sum"
disabled
placeholder="0.00"
/>
</div>
</div>
<div class="row">
<div class="col-md-8 pr-0">
<input
class="form-control total rounded-0"
disabled
placeholder="TOTAL CASHLESS"
/>
</div>
<div class="col-md-4 pl-0">
<input
id="CASHLESS"
class="form-control rounded-0 sum"
disabled
placeholder="0.00"
/>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

You are on the right track.
Issue is that after you clone a node in JavaScript its event listeners are not copied from the source element.
In your case all the input fields where you assigned the onChange handleSelectChange event have lost those event listeners in the cloned node.
All you have to do is reassign those onChange event on the cloned nodes element.
// extend form
const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");
btn.addEventListener("click", (e) => {
e.preventDefault();
const clone = formClone.cloneNode(true);
clone.querySelectorAll("input").forEach((e) => {
e.value = "";
});
clone.querySelector(".type-payment").addEventListener('change', handleSelectChange);
clone.querySelector(".input-price").addEventListener('change', handleSelectChange);
clone.querySelector(".input-pay").addEventListener('change', handleSelectChange);
parentForm.appendChild(clone);
const deleteForm = document.createElement("button");
deleteForm.innerText = "X";
deleteForm.classList.add("btn", "btn-danger", "btn-sm");
clone.appendChild(deleteForm);
deleteForm.addEventListener("click", (e) => {
e.preventDefault();
e.target.parentElement.remove();
});
});
const allInputSum = document.querySelectorAll(".sum");
function handleSelectChange(event) {
const forms = document.querySelectorAll(".clone");
const totals = {'CASHLESS': 0, 'DEBIT': 0, 'CASH': 0};
forms.forEach(form => {
const payment = form.querySelector(".type-payment");
const price = form.querySelector(".input-price");
const pay = form.querySelector(".input-pay");
const inputTotal = form.querySelector(".input-total");
let totalValue;
totalValue = pay.value - price.value;
inputTotal.value = totalValue.toLocaleString();
totals[payment.value] += totalValue;
})
Array.from(allInputSum).filter((e) => {
console.log([e.value, e.id, totals])
e.value = totals[e.id] || 0;
});
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<button id="add-button" class="btn btn-primary mb-3">Add Form</button>
<div class="wrappers">
<div class="row clone mb-2">
<div class="col px-0">
<div class="input-group mb-2">
<input
type="number"
class="form-control rounded-0 input-price"
placeholder="Price"
onchange="handleSelectChange(event)"
/>
</div>
</div>
<div class="col px-0">
<div class="input-group mb-2">
<input
type="number"
class="form-control rounded-0 input-pay"
placeholder="Pay"
onchange="handleSelectChange(event)"
/>
</div>
</div>
<div class="col-auto px-0">
<div class="input-group mb-2">
<select
class="form-control rounded-0 type-payment"
role="button"
onchange="handleSelectChange(event)"
>
<option value="CASH">CASH</option>
<option value="DEBIT">DEBIT</option>
<option value="CASHLESS">CASHLESS</option>
</select>
</div>
</div>
<div class="col px-0">
<div class="input-group mb-2">
<input
onchange="handleSelectChange(event)"
value="0.00"
type="text"
class="form-control rounded-0 input-total"
disabled
/>
</div>
</div>
</div>
</div>
<div class="pt-4">
<div class="row">
<div class="col-md-8 pr-0">
<input
class="form-control total rounded-0"
disabled
placeholder="TOTAL CASH"
/>
</div>
<div class="col-md-4 pl-0">
<input
id="CASH"
class="form-control rounded-0 sum"
disabled
placeholder="0.00"
/>
</div>
</div>
<div class="row">
<div class="col-md-8 pr-0">
<input
class="form-control total rounded-0"
disabled
placeholder="TOTAL DEBIT"
/>
</div>
<div class="col-md-4 pl-0">
<input
id="DEBIT"
class="form-control rounded-0 sum"
disabled
placeholder="0.00"
/>
</div>
</div>
<div class="row">
<div class="col-md-8 pr-0">
<input
class="form-control total rounded-0"
disabled
placeholder="TOTAL CASHLESS"
/>
</div>
<div class="col-md-4 pl-0">
<input
id="CASHLESS"
class="form-control rounded-0 sum"
disabled
placeholder="0.00"
/>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
Try this code, I have made the required changes you need.

How to show total value of two text box in another box - Javascript

I am new to javascript, I want to get two fees in text boxes and show sum of those two fees in another text box (which is disabled, so can't edit it, just for showing purpose) below is my html form.. result should show when entering in fee1 or fee2 not in submit button. How to do it?
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id ="total_fee" name="total_fee" >
</div>
</div>

use input event on fee1 and fee2 and then sum their values and put as value of total_fee.
e.g.
const fee1 = document.getElementById("fee1");
const fee2 = document.getElementById("fee2");
const total_fee = document.getElementById("total_fee");
fee1.addEventListener("input", sum);
fee2.addEventListener("input", sum);
function sum() {
total_fee.value = Number(fee1.value)+Number(fee2.value);
}
see in action
https://jsbin.com/lizunojadi/edit?html,js,output

Basically you listen to input event on both of the controls, summing the values into the other input.
document.querySelectorAll("#fee1, #fee2").forEach(function(elem) {
elem.addEventListener("input", do_sum)
})
function do_sum() {
var total = 0
document.querySelectorAll("#fee1, #fee2").forEach(function(elem) {
total += +elem.value;
})
document.querySelector("#total_fee").value = total
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id="total_fee" name="total_fee">
</div>
</div>
</div>
</div>

Here is the simple solution for your code,
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="fee1" name="fee1" required min="0" value="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="fee2" name="fee2" min="0" value="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" disabled class="form-control" id ="total_fee" name="total_fee" >
</div>
</div>
Here in the HTML code default value="0",
Now in Javascript,
const fee1 = document.getElementById('fee1');
const fee2 = document.getElementById('fee2');
const totalFee = document.getElementById('total_fee');
function doSum() {
const fee1Value = parseInt(fee1.value);
const fee2Value = parseInt(fee2.value);
const totalFeeValue = fee1Value + fee2Value;
totalFee.value = totalFeeValue;
}
fee1.addEventListener('input', doSum);
fee2.addEventListener('input', doSum);
doSum() function is executing oninput

How to print a form value using jquery in html

Suppose I have a form with some input values(name, mobile_number, age and gender).
After fill up the form while I clicked submit button, I want to print the form values.
I have already tried with jQuery but not get the exact result.
Here is my result
But I want to print the form data like this
Name : Raff
Mobile Number : 016*******
Age : **
Gender : Male
Here is my form
<form action="{{url('/add-prescription')}}" method="post" id="new_prescription_form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row clearfix">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-8">
<div class="card">
<div class="body">
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Name: </b>
<input type="text" id="name" class="form-control" placeholder="" name="name" required/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Mobile Number: </b>
<input type="text" id="mobile_number" class="form-control" placeholder="" name="mobile_number" required/>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group">
<div class="form-line">
<b>Age: </b>
<input type="text" id="age" class="form-control" placeholder="" name="age" required/>
</div>
</div>
</div>
<div class= "col-sm-6">
<b>Gender: </b>
<select id="gender" class="form-control show-tick" name="gender" required>
<option value="">-- Please select --</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Others</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="form-group">
<button type="submit" class="btn btn-primary m-t-15 waves-effect" value="print" onclick="PrintElem()">SUBMIT</button>
</div>
</div>
</form>
jQuery
function PrintElem()
{
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
How to solve this ? Anybody help please.

You have to get the values of input fields and add those into the print HTML, this can be achieved using JavaScript , you don't need JQuery for this.
Update your PrintElem function with this and check
function PrintElem()
{
var name = document.getElementById('name').value;
var mobile_number = document.getElementById('mobile_number').value;
var age = document.getElementById('age').value;
var gender = document.getElementById('gender').value;
var divToPrint=document.getElementById('new_prescription_form');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()"><div><p><lable>Name :</lable><span>'+name+'</span></p><p><lable>Mobile Number :</lable><span>'+mobile_number+'</span></p><p><lable>Age:</lable><span>'+age+'</span></p><p><lable>Gender</lable><span>'+gender+'</span></p></div></body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
Hope this works for you

<html>
<head>
<title>jQuery example</title>
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#InputText').keyup(function() {
$('#OutputText').val($(this).val());
$('#DIVTag').html('<b>' + $(this).val() + '</b>');
});
});
</script>
</head>
<body>
<div id="JQDiv">
<form id="JQForm" action="">
<p>
<label for="InputText">
Enter Name :
</label><br />
<input id="InputText" type="text" name="inputBox" />
</p>
<p>
<label for="OutputText">
Output in box
</label><br/>
<input id="OutputText" type="text" name="outputBox" readonly="readonly" />
</p>
<p>
Output in div
</p>
<div id="DIVTag"></div>
</form>
</div>
</body>
</html>
Similarly you can do it for other form fields.
Also use angularjs to achieve same functionalities you can
This is what you are looking for?
Let me know.

Calculate the total of item quantity into item price with dynamic HTML input fields using jQuery

I would like to calculate the total of item price multiple of item quantity using jQuery. I am using dynamic HTML input fields once I enter the amount it should calculate with quantity and give the total amount. please see the code below
My HTML Code
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".add_new_field"); //Fields wrapper
var add_button = $(".add_another_product"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="add_new_field"><div class="row"><div class="col-md-4"><div class="form-group"><label class="col-form-label"> Enter Product Name</label><input type="text" class="form-control" name="pname[]" placeholder="Product Name" tabindex="1"/></div></div><div class="col-md-4"><div class="form-group"><label class="col-form-label"> No. of Pieces</label><input type="text" class="form-control" name="pcount[]" placeholder="Product Inventory" tabindex="2" /></div></div><div class="col-md-3"><div class="form-group"><label class="col-form-label"> Estimated Amount</label><input type="text" class="form-control" name="estamount[]" placeholder="Product Inventory" tabindex="2" /></div><p>Amount: <span id="Amount"></span></p></div><i class="fa fa-remove"></i></div></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
$('#EstmTotal').blur(function() {
$('.add_new_field').each(function() {
$(this).find('#Amount').html($('#PCount(0)', this).val() * $('#EstmTotal(0)', this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> Enter Product Name</label>
<input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> No. of Pieces</label>
<input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="col-form-label"> Estimated Amount</label>
<input type="text" class="form-control" name="estamount[]" id="EstmTotal" placeholder="Estimated Amount of Each" />
</div>
<p>Amount: <span id="Amount"></span></p>
</div>
<!--<div class="col-md-1 removebtn"><i class="fa fa-remove"></i></div>-->
</div>
</div>
<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>
please see the image for better understanding of the question
There is always an option to discuss

Full code here please try this. it will work according to your requirement.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
></script>
<script type="text/javascript">
function calculate(id){ console.log(id);
// $('#EstmTotal').on('blur',function(){
$(id).parents('.add_new_field').each(function() {
var count = $(this).find("#PCount").val();
var amount = $(this).find("#EstmTotal").val();
$(this).find('#Amount').html(count*amount);
});
// });
}
$(document).ready(function(){
$(".add_another_product").on('click',function(){
var html = '<div class="add_new_field">';
html += '<div class="row">';
html += '<div class="col-md-4">';
html += '<div class="form-group">';
html += '<label class="col-form-label"> Enter Product Name</label>';
html += '<input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name"/></div></div>';
html += '<div class="col-md-4"><divclass="form-group"><label class="col-form-label"> No. of Pieces</label>';
html += '<input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items"/>';
html += '</div></div>';
html += '<div class="col-md-3">';
html += '<div class="form-group">';
html += '<label class="col-form-label"> Estimated Amount</label><input type="text" class="form-control" name="estamount[]" id="EstmTotal" placeholder="Estimated Amount of Each" onblur="calculate(EstmTotal)" />';
html += '</div><p>Amount: <span id="Amount"></span></p></div>';
html += '</div></div>';
$(this).before(html);
})
})
</script>
</head>
<body>
<div class="add_new_field">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> Enter Product Name</label>
<input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name"/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> No. of Pieces</label>
<input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="col-form-label"> Estimated Amount</label>
<input type="text" class="form-control" name="estamount[]" id="EstmTotal" onblur="calculate(EstmTotal)" placeholder="Estimated Amount of Each"/>
</div>
<p>Amount: <span id="Amount"></span></p>
</div>
<!--<div class="col-md-1 removebtn"><i class="fa fa-remove"></i></div>-->
</div>
</div>
<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>
</body>
</html>

Do not use same id for multiple elements, user class instead of id. See below code to get amount
$(function(){
$(document).on("blur", "div.row .col-md-3 input[name='estamount[]']", function(){
var $row = $(this).closest('.row'); // get parent row
var est = $(this).val(); // read estimante
var count = $row.find('input[name="pcount[]"]').val(); // read count
$row.find('span.Amount').html(est*count); // put product
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> Enter Product Name</label>
<input type="text" class="form-control" name="pname[]" placeholder="Product Name"/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> No. of Pieces</label>
<input type="text" class="form-control" name="pcount[]" placeholder="No.Of Items"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="col-form-label"> Estimated Amount</label>
<input type="text" class="form-control" name="estamount[]" placeholder="Estimated Amount of Each"/>
</div>
<p>Amount: <span class="Amount"></span></p>
</div>
<!--<div class="col-md-1 removebtn"><i class="fa fa-remove"></i></div>-->
</div>
</div>
<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

I have made following changes in your code, where in you are finding the first element inside the array. You will get the desired results
$('#EstmTotal').blur(function() {
$('.add_new_field').each(function() {
var elem = $($('#PCount')[0]).val();
var elem2 = $($('#EstmTotal')[0]).val();
$(this).find('#Amount').html(elem * elem2);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> Enter Product Name</label>
<input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> No. of Pieces</label>
<input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="col-form-label"> Estimated Amount</label>
<input type="text" class="form-control" name="estamount[]" id="EstmTotal" placeholder="Estimated Amount of Each" />
</div>
<p>Amount: <span id="Amount"></span></p>
</div>
<!--<div class="col-md-1 removebtn"><i class="fa fa-remove"></i></div>-->
</div>
</div>
<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

$('#EstmTotal').blur(function(){
$('.add_new_field').each(function() {
$(this).find('#Amount').html($('#PCount').val()*$('#EstmTotal').val());
});
});
JsFiddle source

I changed your code a bit. Now it checks on the blur event of both elements and it checks if both have a value. If both have it sets the calculated value. If not the div will me emptied.
Also parsing the value to a floating point number. You can change this to integers if you prefer that. The typing checking to number will be same for integers. I round the number down to 2 decimals, mainly to get around floating point number precision issues.
Last, since i thought you will have the ability to create more rows dynamically I made the blur event delegated by your .add_new_field element. This assumes your
.add_new_field is a static element. If not change this to the closest static parent of your row. For this I also changed some id selectors to class selectors because id's need to be unique.
$('.add_new_field').on('blur', '.EstmTotal, .PCount', function() {
$(this).closest('.row').each(function() {
var pcCount = parseFloat($(this).find('.PCount', this).val());
var estTotal = parseFloat($(this).find('.EstmTotal', this).val());
if (typeof pcCount === 'number' && pcCount && typeof estTotal === 'number' && estTotal) {
var calculatedValue = pcCount * estTotal;
calculatedValue = Math.round(calculatedValue * 100) / 100;
$(this).find('.Amount').text(calculatedValue);
} else {
$(this).find('.Amount').text('');
}
});
});
$('.add_another_product').on('click', function(){
$('.add_new_field').append($('.row').first().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> Enter Product Name</label>
<input type="text" class="form-control" name="pname[]" placeholder="Product Name" />
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="col-form-label"> No. of Pieces</label>
<input type="text" class="form-control PCount" name="pcount[]" placeholder="No.Of Items" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="col-form-label"> Estimated Amount</label>
<input type="text" class="form-control EstmTotal" name="estamount[]" placeholder="Estimated Amount of Each" />
</div>
<p>Amount: <span class="Amount"></span></p>
</div>
<!--<div class="col-md-1 removebtn"><i class="fa fa-remove"></i></div>-->
</div>
</div>
<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

ng-model not updating with input from textbox

This seems like a weird one to me. I have a form for adding vets to a dog walkers' database. I've used ng-model on each field in the form.
<div class="container-fluid" ng-show="nav.page == 'new'" ng-controller="dataController as data">
<div class="row" ng-show="nav.tab == 'vet'">
<div class="col-md-2">
</div>
<div class="col-md-8">
<h1>Add a Vet</h1>
<hr />
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name..." ng-model="data.creator.vet.Name"/>
</div>
<div class="form-group">
<input type="Text" class="form-control" placeholder="Address..." ng-model="data.creator.vet.Address"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Phone Number..." ng-model="data.creator.vet.Phone"/>
</div>
<div class="form-group">
<button class="btn btn-success" ng-click="data.newVet()">Submit</button>
</div>
</form>
</div>
<div class="col-md-2">
</div>
</div>
</div>
Yesterday it was working fine, today it won't update data.creator.vet when I input data. For the life of me, I can't see any problems with it.
The js:
app.controller('dataController', function($http) {
dataCon = this;
this.creator = {};
this.creator.client = {};
this.creator.vet = {};
this.creator.client.Dogs = [];
this.allData = {};
this.newVet = function(){
console.log("New Vet Creating....")
console.log(dataCon.creator)
vet = JSON.stringify(dataCon.creator.vet);
console.log(vet);
$http.get(SERVICE_URL + "?fn=vetCreate&vet=" + vet).then(function(response) {
dataCon.init();
});
}
});