Button click is not responding - javascript

<form class="cityForm form-horizontal form-label-right" action="" method="POST" novalidate>
<div class="form-group">
<div class="city col-md-4 col-sm-4 col-xs-12">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span> </label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-8 col-sm-8 col-xs-12">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span> </label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address"> </div>
</div>
</div>
<div class="multiCheck">
<input type="checkbox" value="Yes" id="multiCheck">Have more than one pickup point?
<br> </div>
</div>
<div class="form-group hide" id="cityFormExtend">
<div class="city col-md-4 col-sm-4 col-xs-12">
<div class="item form-group">
<label class="control-label" for="city">City<span class="required">*</span> </label>
<div class="">
<select class="form-control" id="city" name="pick_up_city">
<option>Select City</option>
<option>Mumbai</option>
<option>Delhi</option>
<option>Jaipur</option>
</select>
</div>
</div>
</div>
<div class="address col-md-8 col-sm-8 col-xs-12">
<div class="item form-group">
<label class="control-label" for="address">Address<span class="required">*</span> </label>
<div class="">
<input type="text" class="form-control" id="address" name="pick_up_address"> </div>
</div>
</div>
<div class="multiBtn">
<button type="button" class="addBtn">Add another pickup location</button>
<button type="button" class="removeBtn">Remove this pickup location</button>
</div>
</div>
</form>
The above is my html form and it has got two form-group classes. The first one is always displayed as the browser opens and the second one appears only when the checkbox is checked. It is working fine up to here.
Now, I want the removeBtn to remove the new form created and addBtn to add another form.
Below is my JavaScript code:
$(document).ready(function() {
$('#multiCheck').change(function() {
if (this.checked) {
var $pick = $('#cityFormExtend');
$clone = $pick.clone().removeClass('hide').removeAttr('id').insertBefore($pick);
}
if (!this.checked) {
$clone.remove();
}
}).on('click', '.addBtn', function() {
var $pick = $(this).parents('.form-group');
$clone = $pick.clone().insertBefore($pick);
}).on('click', '.removeBtn', function() {
var $pick = $(this).parents('.form-group');
$pick.remove();
})
});


use
<script>
$(document).on('click', '.addBtn', function(){
var $pick = $(this).parents('.form-group');
$clone = $pick.clone().insertBefore($pick);
});
$(document).on('click', '.removeBtn', function() {
var $pick = $(this).parents('.form-group');
$pick.remove();
});
</script>

Related

change the style of only first element in an array of class elements using javascript

i have this html code that has a list. in my css listName is set to display='none'
when the dom page opens up i need the FIRST element of the class="listName" to show.. obviously this class in js is an array.. can you please show me
i need to make the page more user friendly. i need one li showing and if the user decides to book more shipments he can click on Add more shipments to show another li
the css file has this
.listHolder {
display: none;
}
here is the image of what it looks like now
<div class="container">
<div class="listHolder" th:each="freight, itemStat : *{freightsDto}">
<ul class="list">
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
<li class="listName">
<div class="row mtp">
<div class="col-sm-8 w-50 desc">
<label class="row">Item description</label>
<input id="addInput" class="row form-control" type="text" th:field="*{freightsDto[__${itemStat.index}__].name}" required="required">
</div>
<div class="col-sm-2">
<div class="inblk mlt custom-control custom-radio custom-control-inline mtp" th:each="modelMap : ${T(com.payara.common.AssetCondition).values()}">
<input type="radio" th:field="*{freightsDto[__${itemStat.index}__].assetCondition}" class="custom-control-input" th:value="${modelMap}"> <!-- this works fine with modelMap.displayValue -->
<label class="custom-control-label" th:for="${#ids.next('freightsDto[__${itemStat.index}__].assetCondition')}"
th:text="${modelMap.displayValue}">Asset condition</label>
<!-- this works fine with itemStat.count too -->
</div>
</div>
</div>
<div class="row mtp">
<div class="col-sm-3 pack">
<label for="packaging" class="row custom-control-label">Packaging</label>
<select name="Packaging" id="packaging" class="row form-select">
<option th:each="modelMap : ${T(com.payara.common.PackageType).values()}"
th:value="${modelMap}" th:text="${modelMap.displayValue}" size="50">
</option>
</select>
</div>
<div class="col-sm-3 dim">
<label style="margin-left: 2px;" class="row custom-control-label">Dimensions</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].length}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].width}">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].height}">
<div class="input-group-prepend">
<span class="input-group-text">L x W x H (inch)</span>
</div>
</div>
</div>
<div class="col-sm-3 wght">
<label style="margin-left: 2px;" class="row custom-control-label">Weight</label>
<div class="input-group mb-3">
<input type="text" class="form-control" th:field="*{freightsDto[__${itemStat.index}__].weight}">
<div class="input-group-prepend">
<span class="input-group-text">lbs</span>
</div>
</div>
</div>
<div class="col-sm-3 plts">
<label class="row custom-control-label">How many pallets</label>
<div class="row input-group mb-3">
<input type="text" class="form-control"
th:field="*{freightsDto[__${itemStat.index}__].pallets}">
</div>
</div>
</div>
<hr>
</li>
</ul>
</div>
<div id="toggleBtn" class="row mtp">
<button id="addBtn" class="col-sm-12">
Add more shipments
</button>
</div>
</div>

You can get the list of elements with class "listName", and change the first element of that list.
Javascript
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
window.onload = function(){
// Get elements with class name
var elements_array = document.getElementsByClassName("listName");
// Change first element
elements_array[0].style.display = "block";
}
.listName {
display: none;
}
<html>
<body>
<div class="listHolder">
<ul class="list">
<li>
<span class="listName">Macbook</span>
</li>
<li>
<span class="listName">Amazon Firestick</span>
</li>
<li>
<span class="listName">Keyboard</span>
</li>
<li>
<span class="listName">Headphones</span>
</li>
<li>
<span class="listName">Airpods</span>
</li>
</ul>
</div>
</body>
</html>

I think you can do with JavaScript
<script type="text/javascript">
// create the function with JavaScript
function removerClass() {
// get all elements with listName class
let element = document.getElementsByClassName("listName");
// get the first element
element = element[0];
// remove the element's class
element.classList.remove("listName");
}
// call the function when the page is loaded
removerClass()
</script>
I hope it's usefull

JQuery - Hiding/Showing items on form based on checkbox/select

I am hiding inputs on my modal form. I am using both a select dropdown and a checkbox. My code is working fine but I want to better understand what I have done as I am still new to JQuery.
For the checkbox the code works fine without calling the function once the modal is opened however for the select to work I have to call the code once the modal is open. I want to better understand why this is the case. Thanks!
Code below:
//select change
$('#modal-track').on('shown.bs.modal', function() {
$('#track_type').change(function() {
if ($('#track_type').val() == 'Source') {
$('.mfnswitch').show();
} else {
$('.mfnswitch').hide();
}
});
});
//checkbox change
function valueChanged() {
if (
$('.checkboxinput').is(':checked') &&
$('input[name=budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (!$('.checkboxinput').is(':checked') &&
!$('input[name=budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
if (!$('.checkboxinput').is(':checked') &&
$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').show();
$('.mfnhide').hide();
} else if (
$('.checkboxinput').is(':checked') &&
!$('input[name=sync_budget]').is(':hidden')
) {
$('.hidden').hide();
$('.mfnhide').show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="add_track" id="TrackForm" method="post">
<div class="form-row ">
<div class="col-md-3 mb-0">
<div id="div_id_track_type" class="form-group">
<label for="track_type" class=" requiredField">
Track type<span class="asteriskField">*</span> </label>
<div class="">
<select name="track_type" class="track_type select form-control" id="track_type">
<option value="Source" selected="">Source</option>
<option value="Library">Library</option>
<option value="Original Composition">Original Composition</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-row form-row">
<div class="col-md-2 mb-0 mfnswitch" id="mfnswitch">
<div class="custom-control custom-switch">
<div class="form-group">
<div id="div_id_mfn" class="custom-control custom-checkbox"> <input type="checkbox" name="mfn" class="custom-control-input checkboxinput custom-control-input" onchange="valueChanged()" id="customSwitch1" checked=""> <label for="customSwitch1" class="custom-control-label">
MFN
</label> </div>
</div>
</div>
</div>
<div class="col-md-10 mb-0 mfnhide" id="mfnhide">
<div id="div_id_budget" class="form-group"> <label for="id_budget" class=" requiredField">
Budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="budget" value="0" class="numberinput form-control" required="" id="id_budget"> </div>
</div>
</div>
<div class="col-md-4 mb-0 hidden" id="hidden">
<div id="div_id_sync_budget" class="form-group"> <label for="id_sync_budget" class=" requiredField">
Sync budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="sync_budget" value="0" class="numberinput form-control" required="" id="id_sync_budget"> </div>
</div>
</div>
<div class="col-md-6 mb-0 hidden" id="hidden">
<div id="div_id_master_budget" class="form-group"> <label for="id_master_budget" class=" requiredField">
Master budget<span class="asteriskField">*</span> </label>
<div class=""> <input type="number" name="master_budget" value="0" class="numberinput form-control" required="" id="id_master_budget"> </div>
</div>
</div>
</div>
<div class="form-row ">
<div class="col-md-1 mb-0"> <input type="submit" name="submit" value="Save" class="btn btn-primary" id="submit-id-submit">
</div>
</div>
</form>

Jquery toggle and reset form elements

I need to show and hide some form elements according to a checkbox selection.
This is my HTML:
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
</div>
Here I want to display #address2 DIV if address_check check box checked and other wise it should be hide.
This how I tried it.
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
});
My problem is I want to reset the form elements inside address2 div when this is toggling down. Reset mean I want to make empty these elements.
Can anybody tell me how to do it?
Thank you.

Try doing:
$('#address2').find("input").val("");
$("#address2").find('select option:first').prop('selected',true);
Working fiddle

Try this:
var address2 = $('#address2');
$('input[name="address_check"]').bind('change',function(){
var isChecked = $(this).is(':checked');
isChecked ? address2.fadeIn() : address2.fadeOut();
if(!isChecked)
{
address2.find('input, textarea').val('');
address2.find('select').prop('selectedIndex',0);
}
});

The easiest way to do this is using:
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$("#address2 :input").val("");
$("#address2 :select").prop('selected',false);
});
});
</script>
<div class="form-group">
<label>
<input name="address_check" value="1" type="checkbox">
<span class="lbl"> Yes, My postal address is different</span>
</label>
</div>
<div id="address2">
<div class="form-group">
<label class="control-label" for="street_no">Street No:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_no" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">Street Name:</label>
<div class="col-xs-12 col-sm-9">
<input type="text" name="street_name" class="col-xs-12 col-sm-4" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="street_name">select Name:</label>
<div class="col-xs-12 col-sm-9">
<select name="name" class="col-xs-12 col-sm-4" >
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>

Try this
$('input[name="address_check"]').bind('change',function(){
$('#address2').fadeToggle(!$(this).is(':checked'));
$('#address2').find("input").val("");
});

Dynamically add new rows if option is equal to value

I've created a specific form in bootstrap. however i would like to make this dynamic so that it shows fields depending on a field value. For instance how can i add a textarea if the value of the option field is 1 or 2?
<div class="container">
<h3>Kontakt</h3>
<div class="row">
<div class="form-group form-group-options col-lg-6 col-centered">
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Navn">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Email">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Address">
</div>
<div class="input-group input-group-multiple-select col-xs-12">
<select class="form-control" name="values[]">
<option value="">Vælg</option>
<option value="1">Tilflytning</option>
<option value="2">Fraflytning</option>
<option value="3">Andet</option>
</select>
</div>
</div>
</div>
</div>
https://jsfiddle.net/DTcHh/12528/

A change event its what you need
$('#select').change(function(){
$(this).val()=="1" || $(this).val()=="2" ? $('#textarea').removeClass("hidden") : $('#textarea').addClass("hidden");
}).trigger("change");
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
body {
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>Kontakt</h3>
<div class="row">
<div class="form-group form-group-options col-lg-6 col-centered">
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Navn">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Email">
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<input type="text" name="option[]" class="form-control" placeholder="Address">
</div>
<div class="input-group input-group-multiple-select col-xs-12">
<select id="select" class="form-control" name="values[]">
<option value="">Vælg</option>
<option value="1">Tilflytning</option>
<option value="2">Fraflytning</option>
<option value="3">Andet</option>
</select>
</div>
<div class="input-group input-group-option col-xs-12 col-centered">
<textarea class="form-control" id="textarea"></textarea>
</div>
</div>
</div>
</div>

you can exploit change event. You can do something like this:
$('select').on('change',function(e){
//Insert your conditions, for example:
if($(this).val()=='2'|| $(this).val()=='3'){
//Insert here what you want, for example:
$('<p>Test</p>').insertAfter('.input-group-multiple-select');
}
})
Fiddle
Let me now it this was useful.

A bit late, but this is my contribution:
jQuery(document).ready(function ($) {
$("select[name='values\[\]']").on("change", function () {
if ($(this).val() == 1 || $(this).val() == 2) {
$("#textarea").remove();
$("<div id='textarea' class='input-group input-group-option col-xs-12 col-centered'><textarea name=''></textarea></div>")
.insertAfter(this)
.parent();
} else {
$("#textarea").remove();
}
});
});
Fiddle

clone form elements and increment name tags

Using the following html and forked js I have nearly got this working however, I need to change the label references to category1 and it's inner html to increment with the id etc
Any ideas?
Regards Pete
<div class="category" id="category1">
<div class="row">
<!-- Till Category -->
<div class="col col-lg-8">
<div class="form-group">
<label class="control-label" for="Category1">Category1</label>
<select id="Category1" name="Category1" class="form-control">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
<!-- helpful addition-->
<div class="col col-lg-1">
<div class="form-group">
<label class="control-label" for="Qty1">qty1</label>
<input id="Qty1" name="Qty1" type="text" placeholder="Quantity" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Cost1">Cost1</label>
<input id="Cost1" name="Cost1" type="text" placeholder="Cost" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Total1">Total1</label>
<input id="Total1" name="Total1" type="text" placeholder="" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="another">New</label>
<button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
</div>
</div>
</div>
</div>
And my JS code:
var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".category").length + 1;
$(document).on("click", 'button.clone', function(){
$(this).closest(".category").clone().insertBefore(".before")
.attr("id", "category" + cloneIndex).find("[id], [name]").each(function() {
this.id = this.id.replace(/\d+$/, cloneIndex );
this.name = this.name.replace(/\d+$/, cloneIndex );
});
cloneIndex++;
});

For this I would take a completely different approach and use an HTML template.
While there are a tun of templating libraries out there that you may want to grow into (Handlebars, Mustache, jQuery plugin, etc.) a simple string replace works just fine for this example.
Live Demo
JS
var clone = (function(){
var cloneIndex = 0;
var template = $('#categoryTemplate').text();
return function(){
//Replace all instances of {{ID}} in our template with the cloneIndex.
return template.replace(/{{ID}}/g, ++cloneIndex);
}
})();//self executing function.
var categories = $('#categories')
$(document).on("click", 'button.clone', function(){
categories.append(clone());
});
//Start us off with 1 category.
categories.append(clone());
HTML - notice that the HTML is inside a text/template script tag.
<script type="text/template" id="categoryTemplate">
<div class="category" id="category{{ID}}">
<div class="row">
<!-- Till Category -->
<div class="col col-lg-8">
<div class="form-group">
<label class="control-label" for="Category{{ID}}">Category{{ID}}</label>
<select id="Category{{ID}}" name="Category{{ID}}" class="form-control">
<option>Option one</option>
<option>Option two</option>
</select>
</div>
</div>
<!-- helpful addition-->
<div class="col col-lg-1">
<div class="form-group">
<label class="control-label" for="Qty{{ID}}">qty{{ID}}</label>
<input id="Qty{{ID}}" name="Qty{{ID}}" type="text" placeholder="Quantity" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Cost{{ID}}">Cost{{ID}}</label>
<input id="Cost{{ID}}" name="Cost{{ID}}" type="text" placeholder="Cost" class="form-control">
</div>
</div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="Total{{ID}}">Total{{ID}}</label>
<input id="Total{{ID}}" name="Total{{ID}}" type="text" placeholder="" class="form-control">
</div>
</div>
</div>
</div>
</script>
<div id='categories'></div>
<div class="col col-lg-1">
<!-- Text input-->
<div class="form-group">
<label class="control-label" for="another">New</label>
<button type="button" name="another" class="btn btn-info btn-sm form-control clone">+</button>
</div>
</div>

Categories