We Keep Coding

How to display value in nearby input text box

I have got two input type textboxes
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate" placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
When I enter values in one text box ,the jquery script I prepared calculates with the vlaues and result should be shown in name="ustate[]" text box
$('.locur').live('change',function(){
var local_id = $("#curr_id").val();
var amt = $(this).val();
var convertedcost = convert_amt(amt,local_id);
$(this).find('.usr input[type="text"]').val(convertedcost);
//$(this).closest('usr').find('input[type="text"]').val(convertedcost);
});
I have tried above script,but it didn't work.
Note: There will be multiple set of these two text boxes as its looped throught a PHP script.
Any solutions ?

I'd suggest to wrap each of these sets with a div with a class say wrap, like this:
<div class="wrap">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate" placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
</div>
then:
$(this).parents(".wrap").first().find("#ustate")
without wrapping:
$(this).parents(".col-sm-3").first().next().find("#ustate")

add a 'newclass' in the top most div class that will also work.
<div class="col-sm-3 newclass">
<div class="input-group">
<span class="input-group-addon icon_change"><i class="fa"></i></span>
<input type="text" class="form-control locur" name="locale[]" id="locale" placeholder="Enter the value" maxlength="10" value="" />
</div>
</div>
<div class="col-sm-3" id="usr" class="usr">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-usr"></i></span>
<input type="text" class="form-control usr" name="ustate[]" id="ustate"
placeholder="Enter the rate" maxlength="10" value="" />
</div>
</div>
then use :
$(this).parents(".newclass").first().next().find("#ustate");
its better to use a different class name than a bootstrap class name.

When I select one value from the dropdown button, the other values appear as well

I was wondering if you can help me out with the following. I created a dropdown payment option. When I select "checking/savings account" the form displays 2 input fields so that the user can type in their banking account number and router number. This is what I want for this option. However, when I select the credit card option, the credit card form appears, but the banking form appears on top of it. Can someone tell me what I am doing wrong? Also, when I switch options back and forth, the forms do not change at all, but remain the same.
document.getElementById('paymentOptions').onchange = function () {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
} else {
document.getElementById('Banking').style.display = 'block';
}
}
<div class="col-75">
<div class="container">
<form>
<label>Payment method</label>
<select id="paymentOptions" name="paymentOptions">
<option value="CreditCard">Credit Card</option>
<option value="BankingAccount">Checking/Savings Account</option>
</select>
<div class="row" id="Banking" style="display: none">
<div class="col-50">
<label for="ccnum">Bank Account</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
<div class="col-50">
<label for="ccnum">Routing Number</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
</div>
<div class="row" id="CreditCard" style="display: none">
<div class="col-50">
<label for="fname"><i class="fa fa-user"></i> Company Name</label>
<input type="text" id="fname" name="firstname">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
</div>
</div>
</div>
<div class="col-50">
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv">
</div>
</div>
</div>
</div>
<p>
<input type="checkbox" id="autopayment" />
<label for="autopayment">Enroll in autopayment</label>
</p>
<input type="submit" value="Submit payment" class="btn">
</form>
</div>
</div>
</div>

You have to hide the other value when that one is selected in other words toggling
document.getElementById('paymentOptions').onchange = function() {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none'
} else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none'
}
}

The reason for the problems you are getting is that you change the display of your CreditCard div and Banking div to block but you do not change them back to display: none if they are not chosen.
Also you should add an onload listener to check what the initial value of your paymentOptions dropdown is to then change the display value of your 2 divs.
window.onload = () => {
const paymentOptionsSelect = document.getElementById("paymentOptions");
const selectedOption = paymentOptionsSelect.options[paymentOptionsSelect.selectedIndex].value;
if (selectedOption == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none';
}
else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none'
}
};
Look carefully at the 2 added lines in your change listener:
document.getElementById('paymentOptions').onchange = function () {
if (this.value == 'CreditCard') {
document.getElementById('CreditCard').style.display = 'block'
document.getElementById('Banking').style.display = 'none'; // set back to display none when CreditCard is not selected.
} else {
document.getElementById('Banking').style.display = 'block';
document.getElementById('CreditCard').style.display = 'none' // set back to display none when Banking is not selected.
}
}
Good luck!

Try with Jquery 3.3.1 approach, Hoping this can help you
$(document).ready(function(){
$("#paymentOptions").on('change', function(){
if ($(this).val() == 'CreditCard') {
$('#CreditCard').css('display','block');
$('#CreditCard').css('display','none');
} else {
$('#CreditCard').css('display','none');
$('#CreditCard').css('display','block');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-75">
<div class="container">
<form>
<label>Payment method</label>
<select id="paymentOptions" name="paymentOptions">
<option value="CreditCard">Credit Card</option>
<option value="BankingAccount">Checking/Savings Account</option>
</select>
<div class="row" id="Banking" style="display: none">
<div class="col-50">
<label for="ccnum">Bank Account</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
<div class="col-50">
<label for="ccnum">Routing Number</label>
<input type="text" id="ccnum" name="cardnumber">
</div>
</div>
<div class="row" id="CreditCard" style="display: none">
<div class="col-50">
<label for="fname"><i class="fa fa-user"></i> Company Name</label>
<input type="text" id="fname" name="firstname">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state">
</div>
<div class="col-50">
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
</div>
</div>
</div>
<div class="col-50">
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv">
</div>
</div>
</div>
</div>
<p>
<input type="checkbox" id="autopayment" />
<label for="autopayment">Enroll in autopayment</label>
</p>
<input type="submit" value="Submit payment" class="btn">
</form>
</div>
</div>
</div>

Programmatically simulate a click on an element when Enter is pressed in a field

My html:
<div class="container">
<div class="row d-none d-md-block d-xl-none" id="PrescriptionTitle">
<div class="col-sm-6">
<span for="" class="text-left">Brand Name</span>
</div>
<div class="col-sm-6">
<span for="">Generic name</span>
</div>
<div class="col-sm-2">
<span for="">Dose</span>
</div>
<div class="col-sm-2">
<span for="">Units</span>
</div>
<div class="col-sm-3 col-sm-offset-5">
<span class="text-nowrap" for="">Frequency</span>
</div>
<div class="col-sm-1">
<span for="">Durn</span>
</div>
<div class="col-sm-2">
<span for="inputEmail4">Units</span>
</div>
</div>
<div class="row DrugRow" id="DrugRow1">
<div class="col-sm-6">
<input type="text" id="brand1" class="form-control BrandName input-sm ui-autocomplete-input" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
<input type="text" id="generic1" class="form-control GenericName input-sm ui-autocomplete-input" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="dose1" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="doseunits1" class="form-control DoseUnits input-sm ui-autocomplete-input" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
<input type="text" id="freq1" class="form-control Frequency input-sm ui-autocomplete-input" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durn1" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durnunit1" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="">
</div>
<div class="col-sm-1">
<a id="DelRow1" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>
<div class="row DrugRow" id="DrugRow2">
<div class="col-sm-6">
<input type="text" id="brand2" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
<input type="text" id="generic2" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="dose2" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="doseunits2" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
<input type="text" id="freq2" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durn2" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durnunit2" class="form-control DurationUnits input-sm ui-autocomplete-input" placeholder="days" aria-label="DurationUnits" aria-describedby="" autocomplete="off">
</div>
<div class="col-sm-1">
<a id="DelRow2" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>
<div class="row">
<div class="col-sm-23"></div>
<div class="col-sm-1">
<a id="AddRow1" class="btn btn-primary btn-large AddRow" href="#" tabindex="5"><i class="fa fa-plus-circle fa-lg"></i></a>
</div>
</div>
</div>
Javascript code snippet:
var $input = $('input[type=text]');
$input.on('keyup', function (e) {
var myClass = $(this).attr("class");
console.log(myClass);
if (myClass.indexOf("DurationUnits") != -1) {
$(this).siblings('.AddRow').click();
return true;
}
// DurationUnits
if (e.which === 13) {
var ind = $input.index(this);
$input.eq(ind + 1).focus()
}
});
$('body').on('click', '.AddRow', function() {
// $("#DiscardModal").modal();
console.log("Clicked Add Row");
var id = 0;
var count = 0;
var IdList=[];
$(".DrugRow").each(function() {
id = $(this).attr('id');
count = id.replace("DrugRow", "");
});
var lastelementcount = count;
console.log("Last element count is " + lastelementcount);
count++;
var NewHTML = `
<div class="row DrugRow" id="DrugRow` + count + `">
<div class="col-sm-6">
<input type="text" id="brand` + count + `" class="form-control BrandName input-sm" placeholder="Brand name" aria-label="BrandName" aria-describedby="">
</div>
<div class="col-sm-6">
<input type="text" id="generic` + count + `" class="form-control GenericName input-sm" placeholder="Generic name" aria-label="GenericName" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="dose` + count + `" class="form-control Dose input-sm" placeholder="Dose" aria-label="Dose" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="doseunits` + count + `" class="form-control DoseUnits input-sm" placeholder="mg" aria-label="DoseUnits" aria-describedby="">
</div>
<div class="col-sm-3">
<input type="text" id="freq` + count + `" class="form-control Frequency input-sm" placeholder="OD" aria-label="Frequency" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durn` + count + `" class="form-control Durn input-sm" placeholder="5" aria-label="Durn" aria-describedby="">
</div>
<div class="col-sm-2">
<input type="text" id="durnunit` + count + `" class="form-control DurationUnits input-sm" placeholder="days" aria-label="DurationUnits" aria-describedby="">
</div>
<div class="col-sm-1">
<a id="DelRow` + count + `" class="btn btn-danger btn-large DelRow" href="#" tabindex="5"><i class="fa fa-minus-circle fa-lg"></i></a>
</div>
</div>
`;
$("#DrugRow" + lastelementcount).after(NewHTML);
event.preventDefault();
return false;
});
I need to move to the next input field on pressing Enter. I have successfully done that. When I come to the last input field on a row (which has a class DurationUnits), I need to simulate a click on the adjacent button which has a class AddRow. This is an element, and clicking this will create a few elements by javascript code (already done).
What's not working is the code simulating a click when enter is pressed from the input with class DurationUnits

It's because you return true if it has class "DurationUnits".
The return stops the function from executing the condition that follows (e.which === 13)
if (myClass.indexOf("DurationUnits") != -1) {
....
return true;
}
// On class "DurationUnits" this won't run:
if (e.which === 13) {
....
}

How to activate form field one by one with the valid values user entered

I do have a Form and now I need to activate this form's field one by one. That mean If an user fill out first field correctly (Not empty and should be valid) then I need to activate second one and so on.
This is my HTML form:
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
This is how I tried it in jquery:
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
$('.sequence').on('change blur keyup', enableNextElement);
});
This coding working for me but not work with validation. That mean if an user entered a not valid email next field is activating. But I want to keep next field disable till user entered a valid email.
Can anybody tell me how to do it?
UPDATED HTML
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
Thank you.

your both function call simultaneously and you havent mention sequence class to textboxes so you can try
http://jsfiddle.net/Vishnuk/uqfe2403/6/
html
<form>
<div class="form-group">
<label for="">First Name</label>
<input type="text" class="form-control name sequence" placeholder="First Name">
</div>
<div class="form-group">
<label for="">Email address</label>
<input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
</div>
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Script
function fakeValidator(event) {
var $element = $(event.target);
if ($element.val().length >= 3) {
$element.addClass('valid');
enableNextElement(event);
} else {
$element.removeClass('valid');
}
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$(document).ready(function() {
$('.sequence').on('change blur keyup', fakeValidator);
});

Try this
$(".form-control").focusout(function() {
var t = $(this).val();
var k = $(this);
setTimeout(function() {
if (t) {
k.parent().parent().next(".form-group").find(".form-control").removeAttr('disabled');
} else {
k.parent().parent().nextAll(".form-group").children().find(".form-control").attr('disabled', '');
}
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email-address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<div class="form-group element-right">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off" disabled>
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
<div class="form-group element-left">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Drop Off Date" class="form-control datepicker sequence" autocomplete="off" disabled>
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>

Add and remove multiple input group with jquery or javascript

I'm so confused how to add/remove multiple input fields in my code.
This is my code :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
</div>
I want to add new group of input fields when i'm click the button.
Please advice, Thanks

Try this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="input-div">
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
<button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
And this is de jquery code:
$('#b1').click(function(){
var newGroup = $('.input-div').last().html();
$('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');
});
$('#b2').click(function(){
$('.input-div').last().remove();
});