We Keep Coding

Ajax and php mysql auto calculate for invoice submision and print

I am creating a quotation invoice using ajax, php and mysql
I am stuck on making inputs to make calculations and submission of the form and be able to print invoice or save to pdf format
Note
the other thing is when I add a new line, it refreshes the above items inputs and deletes the select item..
$(document).on('click', '.addNewLine', function() {
var html = '<div class="space-15"></div><div class="row sline">\n' +
' <div class="col-md-5"><div class="displayItemDropdown"></div></div>\n' +
' <div class="col-md-1"><input type="text" name="Quantity[]" id="Quantity" data-srno="1" class="form-control" placeholder="Qty" required /></div>\n' +
' <div class="col-md-2"><input type="text" name="price[]" id="Price" data-srno="1" class="form-control" placeholder="Price" required /></div>\n' +
' <div class="col-md-3"><input type="text" name="total[]" id="Total" data-srno="1" class="form-control" placeholder="Total" disabled /></div>\n' +
' <div class="col-md-1"><input type="button" name="removeLine" class="removeLine btn btn-danger btn-xs" value="X"></div>\n' +
' </div>';
$(".div_field").append(html);
$(".div_field").on('click', '.removeLine', function() {
$(this).closest('.sline').remove();
});
displayItem(html);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form method="post" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
Customer Name *
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div id="displayCustomerDropdown" class=""></div>
<i class="fa fa-plus"></i> Add customer
<div class="row">
<div id="ans">
</div>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"></div>
</div>
<div class="space-15"></div>
<div class="ibox-content">
<div class="space-15"></div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4 text-danger">
Date *
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div class="form-group" id="data_1">
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" name="adjustmentDate" value="2022-02-28" required>
</div>
</div>
<!-- /.form group -->
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
Quotation #
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<div id="orderNumber"></div>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
Reference #
</div>
<div class="col-lg-5 col-md-5 col-sm-8 col-xs-8">
<input type="text" class="form-control" placeholder="Reference number" name="referenceNumber">
</div>
</div>
<div class="space-20"></div>
<div class="row">
<div class="row">
<div class="col-md-5"><label>Item Details</label></div>
<div class="col-md-1"><label>Qty</label></div>
<div class="col-md-2"><label>Price</label></div>
<div class="col-md-3"><label>Total</label></div>
<div class="col-md-1"></div>
</div>
<div class="div_field">
<div class="row sline">
<div class="col-md-5">
<div class="displayItemDropdown"></div>
</div>
<div class="col-md-1"><input type="text" name="Quantity[]" value="0" id="Quantity" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Qty" required /></div>
<div class="col-md-2"><input type="text" name="price[]" value="0" id="Price" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Price" required /></div>
<div class="col-md-3"><input type="text" name="total[]" value="0" id="Total" onFocus="startCalc();" onBlur="stopCalc();" data-srno="1" class="form-control" placeholder="Total" disabled /></div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<div class="space-15"></div>
<button type="button" class="addNewLine btn btn-warning btn-xs"><i class="fa fa-plus"></i> Add new line</button>
<i class="fa fa-plus"></i> New Item
<hr />
<div class="space-20"></div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<label>Customer Notes</label>
<textarea title="Customer Notes" placeholder="Enter any notes to be displayed on this transaction" name="comments" class="form-control"></textarea>
<div class="space-20"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 bg-muted">
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Sub Total</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="subtotal" value="0" id="subtotal" onFocus="startCalc();" onBlur="stopCalc();" class="form-control text-right" disabled>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Discount (%)</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="discount" placeholder="Discount" class="form-control">
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>VAT</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<select name="tax" data-placeholder="Choose Item..." class="form-control select2 chosen-select" tabindex="2" autofocus required>
<?php
$vat=vat();
while ($tax=mysqli_fetch_array($vat)) {
?>
<option value="<?php echo $tax['tax_rate'];?>">
<?php echo $tax['taxName'];?>
</option>
<?php
}
?>
</select>
</div>
</div>
<div class="space-15"></div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label>Total</label>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<input type="text" name="total" class="form-control text-right" disabled>
</div>
</div>
<div class="space-15"></div>
</div>
</div>
<div class="space-20"></div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>Terms & Conditions</label>
<textarea title="Terms & Conditions" placeholder="Enter your business terms and condition to used this transaction" name="paymentTerms" class="form-control"></textarea>
</div>
</div>
<hr />
<button type="submit" name="AddItem" class="btn btn-primary">Complete Quotation</button>
<button type="reset" class="btn btn-white" data-dismiss="modal">Cancel</button>
</div>
</form>

Add data to dynamic table from modal form

I have a page that contains a form to collect some info. As part of that is a table where I'm trying to add rows of data from a modal form. Eventually, everything would be submitted to a SQL database.
Effectively, the whole form looks like:
Field 1
Field 2
Field 3
Field 5
Field 6
Field 7
Field 8
Delete
First
row
button
Second
row
Field 9
Submit
So field 1-3 would be appended to the beginning of each row upon submission to the SQL DB and 9 to the end.
The issue I'm having is getting the data entered in fields 5-8 on the modal form to appear in the table. What would be the best way to achieve this? I'm new to this so any help would be great.
I've had a look around and I see lots of way to get data out of a table to a modal form or to enter through fields in the table and add a new row that way like this (Add/Delete table rows dynamically using JavaScript) but I'd prefer to use a modal as my form for the table will end up being quite big.
HTML Form
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span> <br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
Modal
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form name="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<textarea class="form-control" name="components" id="components" required></textarea>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="classification" id="classification" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="button" class="btn btn-primary add-modal-waste" data-dismiss="modal"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>
</div>
</div>

move modal outside the form into a separate form
add submit listener to it (also add id and disable modal dismiss)
on modal form submit, validate data and create and append a table row, in which also add hidden inputs with values in a form of an array (userEntry[0][reference] etc.)
close modal, reset modal form
$(document).ready(function() {
let counter = 0;
$('#userEntry').on('submit', function(e) {
e.preventDefault();
const rows = [];
$.each($(this).serializeArray(), function(i, field) {
if (i > 0 && field.name === rows[rows.length - 1].name) {
rows[rows.length - 1].value += ';' + field.value;
} else {
rows.push(field);
}
});
let list = '<tr>';
$.each(rows, function(i, field) {
list += '<td>' + field.value + '<input type="hidden" name="userEntry[' + String(counter) + '][' + field.name + ']" value="' + field.value + '"/>' + '</td>';
});
list += '<td><button class="btn btn-warning" onclick="return this.parentNode.parentNode.remove();">delete</button></tr>';
$('#userList tbody').append(list);
$('#AddModal').modal('hide');
counter++;
$(this)[0].reset();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal" data-target="#AddModal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span>
<br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
</div>
</form>
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="components" name="components" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="classification" name="classification" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="submit" class="btn btn-primary add-modal-waste"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>

How to show/hide a model in form?

In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model

Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

How to increment input box on add button

I want to increment my input box,
Its incrementing and also splicing but the problem is when i enter value in one box the same is replaced in the other.I think its due to ngModel.Can anyone please help me.Thnaks.
<div class="form-group row text-right" *ngFor='let row of vipInput'>
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" [(ngModel)]="data.vipInput" id="email" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeVipInputs(index)">Remove</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" (click)="vipInputIncrement('val')">
<i class=" fa fa-plus"></i>
</button>
My ts,(I am using angular2)
vipInputIncrement(val) {
this.vipInput.push({'val':''});
}
removeVipInputs(k) {
this.standardInput.splice(k,1);
}

Your ng-model should be something inside this row,
<div class="form-group row text-right" *ngFor='let row of vipInput'>
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" [(ngModel)]="row.val" id="email" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeVipInputs(index)">Remove</button>
</div>
</div>
</div>
</div>
I think it should be row.val, but you can decide what you want to show

Angular UI Bootstrap Input-Group-Button - darn floating button

I have a form that i have just added a bootstrap datepicker to and using an input-group-button.
The problem I have is that the button floats off to the right at the extent of the containing div.
The button in question is the button to the right of TargetDate.
I have been following instructs at TutorialsPoint
JSFiddle here JSFiddle
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="col-sm-10">
<div class="input-group">
<input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /col-sm-10 -->
</div>
<!-- form group -->
<div class="form-group">
<div class="col-sm-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div>
</div>
</form>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</section>
Any assistance gratefully appreciated
Simon

There's a couple things that can help you here:
Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
So with that in mind, you can see how you can control the placement PER row of your elements.
As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.
Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class.
http://jsfiddle.net/Levy0k2f/
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"> <i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
Update for fixing of button, the button was outside the span class.
http://jsfiddle.net/k0f598hr/
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>