I want bring the value of the label "precio" in the selects, make the sum of this values and put into the textarea "cuenta" after click the button "añadir al pedido".
The label "value" of the selects it's saved in the textarea "pedido"
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script>
function calcular(){
var cuenta=0.00:
$('#pedido').val($('#pedido').val()+"\n"+$('#Pizzas option:selected').text());
var newPrice=cuenta;
var newPrice+=parseFloat($(this).find('#Pizzas option:selected').attr('precio'));
$('#pedido').val($('#pedido').val()+"\n"+$('#Bebidas option:selected').text());
var newPrice+=parseFloat($(this).find('#Bebidas option:selected').attr('precio'));
$("#cuenta").html(newPrice);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="Pizzas" name="Pizzas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>
<?php
}
?>
</select>
<select id="Bebidas" name="Bebidas" class="form-control" >
<?php
<option value="<?php echo $datos[0];?>" precio="<?php echo $datos[1];?>"><?php echo $datos[0];?></option>
<?php
}
?>
</select>
<div class="col-12">
<div style="padding-left:20px;">
<textarea name="pedido" class="form-control" id="pedido" cols="30" rows="10" placeholder="Pedido" ></textarea>
</div>
</div>
<div class="col-12 col-lg-6">
<div style="padding-left:10px;">
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required >
</div>
</div>
<button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>
Check this out.
When you pick any item in select list the select element gets the value of the selected item. Also you shouldn't change textarea inner html, you have to change its value.
There is some nuance of how does js engine works.
+"123" it is the same as parseInt("123"). Event better because parseInt is going to drop the reminder, but +"12.3" return 12.3.
If you wrap your select lists in form you can add the require attribute to them and then check that any of items has been chosen.
let allOrdersTotalSumm = 0
let form = document.querySelector('#order-form')
let pizas = document.querySelector('#Pizzas')
let drinks = document.querySelector('#Drinks')
let priceArea = document.querySelector('#cuenta')
let selectedArea = document.querySelector('#pedido')
document.querySelector('#calc').addEventListener('click', calcTotalSum, false)
function calcTotalSum() {
// Check that items are picked
if (!form.reportValidity()) {
return false
}
let totalSum = +pizas.value + +pizas.value
let selectedPiza = pizas.options.item(pizas.options.selectedIndex)
let selectedDrink = drinks.options.item(drinks.options.selectedIndex)
selectedArea.value += `${selectedPiza.textContent} with ${selectedDrink.textContent}.Total: ${totalSum}\n`
allOrdersTotalSumm += totalSum
priceArea.value = allOrdersTotalSumm
// Reset lists to make a new order
form.reset()
}
<div style="margin-bottom:10px;">
<form id="order-form">
<select id="Pizzas" name="Pizzas" class="form-control" data-title="" required>
<option value="" selected>Please chose your pizza</option>
<option value="10">Cheesy pizzza</option>
<option value="12">Cheesy chizz pizzza</option>
<option value="15">Cheesy beacon cheees pizzza</option>
</select>
<select id="Drinks" name="Drinks" class="form-control" data-title="" required>
<option value="" selected>Please chose your drink</option>
<option value="7">Coke</option>
<option value="9">Pepsi</option>
<option value="12">Milkis</option>
</select>
</form>
</div>
<div style="margin-bottom:10px;">
<textarea name="pedido" class="form-control" id="pedido" cols="60" rows="10" placeholder="Pedido"></textarea>
</div>
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>
<button id="calc" name="añadir" type="submit">Añadir al Pedido</button>
Based on your description, i think this is what you want.
Just tell me if i got wrong, and tell me if it's what you expected.
Hope it help.
function calcular() {
let total = parseInt($('#Pizzas').val()) + parseInt($('#Bebidas').val());
$('#cuenta').val(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>Select 1</label>
<select id="Pizzas" name="Pizzas" class="form-control" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<label>Select 2</label>
<select id="Bebidas" name="Bebidas" class="form-control" required>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<br><br>
<input type="text" name="cuenta" id="cuenta" class="form-control" placeholder="Cuenta" required>
<button name="añadir" type="button" class="btn btn-primary p-3 px-xl-4 py-xl-3" onclick="calcular();"><span></span> Añadir al Pedido</button>
Related
can anyone help me. i want to display reasons box if i select pending or incomplete job status.
DROPDOWN
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option value=''></option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
REASON BOX THAT I WANT TO APPEAR IF I SELECTED PENDING OR INCOMPLETE
<div class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
THE SCRIPT
<script>
function myFunction() {
var x = document.getElementById("job_status").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
THANKS ALL
You just need to change the css of the input whenever you select those options using simple if else condition.
function myFunction() {
var x = document.getElementById("job_status").value;
if(x == 'Pending' || x == 'Incomplete'){
document.getElementById("reason").style.display = 'block';
}
else {
document.getElementById("reason").style.display = 'none';
}
}
#reason {
display:none;
}
<div class="form-group">
<label for="exampleFormControlSelect2">Job Status</label>
<select type="text" id="job_status" name="job_status" onchange="myFunction()">
<option selected disabled>Select Status</option>
<option value="Doing">Doing</option>
<option value="Pending">Pending</option>
<option value="Incomplete">Incomplete</option>
<option value="Completed">Completed</option>
</select>
</div>
<div id="reason" class="form-group row">
<label for="reason" class="col-sm-2 col-form-label">Reason</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3">
</div>
</div>
I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop
You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
When i select the option value of "other" in my dropdown lis the form row below appears and allows me to type a manual cemetery but what gets submitted to the database is just the entry of "other" and not what i typed in manually?
<script>
function handleSelect() {
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");
if (selected === "other") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="" placeholder="Enter other Cemetery" />
</div>
</div>
</body>
Try setting name of the input to cemetery.
<input type="text" id="other" class="form-control" name="cemetery" placeholder="Enter other Cemetery" />
This may work, but not a good practise.
I suggest you to do something like following
HTML
<input type="text" id="other" class="form-control" name="other-cemetery" placeholder="Enter other Cemetery" />
PHP
if($_POST["cemetery"] == "other"){
$cemetery = $_POST["other-cemetery"];
}
Update: The first solution that I gave may not work in other cases. So add the following line to handleSelect() function. (Not selected case)
document.getElementById("other").value = document.getElementById("mySelect").value;
Thanks Dum, combining that link of JS and setting the Value of the "other" drop down to empty.
Example: <option value="">Other</option>
This has resolved my issue. Many thanks
i am having the following html
<div class="field">
<label for="approval_approvers_attributes_0_approver_type">Approver</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="$.fn.myFunc(this);">
<option selected="selected" value="Role">Role</option>
<option value="Specific User">Specific User</option>
</select>
</br>
</br>
</div>
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>
and the followng js function definition:
$.fn.myFunc = function (button) {
var id = $(button).attr('id');
id = button.id;
$(button).next().label.text("specific user");
}
the call to this above Jquery function is made in the first div. this function is called when the dropdown in the first div is changed. in this function i want the label text to be changed to "specific user" which is present in the second div, when the user selects "specific user". and accordingly i want to change the dropdown which is present in the second div to textbox, to enter the specific user name. how can i do that?
You need to change your code like,
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input type="text" class="inpt_specific_user" style="display:none"/>
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>
<script>
$.fn.myFunc = function (button) {
var id = $(button).attr('id');
id = button.id;
var $nextDiv = $(button).closest('div.field') // get closest parent field
.next('div.field') // get next parent field
$nextDiv.find('label') // find label
.text(button.value); //change text, this.value so that it will be dynamic for both the values
$nextDiv.find('select.appr_type,input.inpt_specific_user')
.toggle(); // toggle select/input =>hide/show
}
</script>
$.fn.myFunc = function(button) {
var id = $(button).attr('id');
id = button.id;
var $nextDiv = $(button).closest('div.field') // get closest parent field
.next('div.field') // get next parent field
$nextDiv.find('label') // find label
.text(button.value); //change text, this.value so that it will be dynamic for both the values
$nextDiv.find('select.appr_type,input.inpt_specific_user')
.toggle(); // toggle select/input =>hide/show
}
$('#approval_approvers_attributes_0_approver_type').on('change', function() {
$.fn.myFunc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="approval_approvers_attributes_0_approver_type">Approver</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="">
<option selected="selected" value="Role">Role</option>
<option value="Specific User">Specific User</option>
</select>
</br>
</br>
</div>
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input type="text" class="inpt_specific_user" style="display:none" />
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>
Updated, code without using extra element and using replaceWith()
$.fn.myFunc = function(button) {
var id = $(button).attr('id');
id = button.id;
var $nextDiv = $(button).closest('div.field') // get closest parent field
.next('div.field') // get next parent field
$nextDiv.find('label') // find label
.text(button.value); //change text, this.value so that it will be dynamic for both the values
var $el = null;
if (button.value != 'Role') {
$nextDiv.find('select.appr_type').replaceWith('<input type="text" class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]" />');
} else {
$nextDiv.find('input.appr_type').replaceWith('<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">\
<option value="hr manager">hr manager</option>\
<option selected="selected" value="reporting manager">reporting manager</option>\
</select>');
}
}
$('#approval_approvers_attributes_0_approver_type').on('change', function() {
$.fn.myFunc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label for="approval_approvers_attributes_0_approver_type">Approver</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="">
<option selected="selected" value="Role">Role</option>
<option value="Specific User">Specific User</option>
</select>
</br>
</br>
</div>
<div class="field" class="role">
<label for="approval_approvers_attributes_0_approver_value">Role</label>
<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
<option value="hr manager">hr manager</option>
<option selected="selected" value="reporting manager">reporting manager</option>
</select>
<input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a>
</br>
</br>
</div>
I have the following form that renders from a django model_formset. It starts with one form and some static controls (like date etc).The form set fields are inside the 'form-wrapper' div
<form action="/customer/images/1/upload_xray" method="post" id="xrayform" enctype="multipart/form-data">
<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1"><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="0"><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000">
<input type="hidden" name="csrfmiddlewaretoken" value="LI1L39J1C7P4tQeqfJhL5CBuW283FmOI">
<div class="form-group">
<label for="date">Date</label>
<input id="date" type="text" name="date" class="form-control input-sm datepicker input-append date" readonly="">
</div>
<div class="form-group">
<label for="id_title">Title</label>
<select class="form-control input-sm" id="id_title" name="title">
<option value="" selected="selected">---------</option>
<option value="Observation">Observation</option>
<option value="Initial">Initial</option>
<option value="Progress">Progress</option>
<option value="Final">Final</option>
<option value="Post Treatment">Post Treatment</option>
</select>
</div>
<hr class="divider">
<div class="form-wrapper">
<div class="form-group">
<label for="id_form-0-image">Image</label>
<input id="id_form-0-image" name="form-0-image" type="file">
</div>
<div class="form-group">
<label for="id_form-0-type">Type</label>
<select class="form-control input-sm" id="id_form-0-type" name="type">
<option value="" selected="selected">---------</option>
<option value="xray">X-ray Image</option>
<option value="internal">Intraoral Image</option>
<option value="external">Extra-oral Image</option>
<option value="model">Model</option>
</select>
</div>
<div class="form-group">
<label for="id_form-0-desc">Desc</label>
<select class="form-control input-sm" id="id_form-0-desc" name="form-0-desc">
<option value="" selected="selected">---------</option>
<optgroup label="Xray" />
<option value="PA Ceph">PA Ceph</option>
<option value="Lateral Ceph">Lateral Ceph</option>
<option value="Panoramic">Panoramic</option>
<optgroup label="Interior oral">
<option value="Anterior Occlution">Anterior Occlution</option>
<option value="Anterior Occlusion Relaxed">Anterior Occlusion Relaxed</option>
<option value="Overjet Right">Overjet Right</option>
<option value="Overjet Left">Overjet Left</option>
<option value="Right Occlusion">Right Occlusion</option>
<option value="Left Occlusion">Left Occlusion</option>
<option value="Upper Occlusal">Upper Occlusal</option>
<option value="Lower Occlusal">Lower Occlusal</option>
<optgroup label="External oral" />
<option value="Frontal">Frontal</option>
<option value="Lateral Right">Lateral Right</option>
<option value="Lateral Left">Lateral Left</option>
<option value="Oblique smile Right">Oblique smile Right</option>
<option value="Oblique smile Left">Oblique smile Left</option>
<option value="Frontal smile">Frontal smile</option>
<option value="Oblique Right">Oblique Right</option>
<option value="Oblique Left">Oblique Left</option>
<optgroup label="Model"/>
<option value="Model Upper Occlusal">Model Upper Occlusal</option>
<option value="Model Lower Occlusal">Model Lower Occlusal</option>
<option value="Model Right Buccal">Model Right Buccal</option>
<option value="Model Left Buccal">Model Left Buccal</option>
<option value="Model Anterior Dental">Model Anterior Dental</option>
</select>
</div>
</div>
</form>
<div class="row">
<button class="btn btn-sm btn-success pull-right" id="add-form">+</button>
</div>
The add button adds a new form-wrapper element and increments by one the proper input fields so the model_formset of django to function correctly. Each new form-wrapper element consists of a delete button to delete it. On deletion javascript corrects the id's and values again for the formset to function correctly. I have made it work, but uses to much .each methods. Do u think is a better way to do that?
javascript
$(document).on('click','.delete', function (e){
e.preventDefault();
var forms;
var index = parseInt($(this).prop('id')) - 1;
var formWrapper = $(".form-wrapper")[index];
formWrapper.remove();
forms = $(".form-wrapper");
$("#id_form-TOTAL_FORMS").val(parseInt($("#id_form-TOTAL_FORMS").val()) - 1);
forms = $('.form-wrapper');
forms.each(function (index, item){
var form_groups = $(item).children('.form-group');
form_groups.each(function (index2, item2){
controls = $(item2).children();
controls.each(function(index3, item3){
var id = $(item3).prop('id');
parts = id.split('-');
parts[1] = String(index);
id = parts.join('-');
});
});
});
$('button.delete').each(function(index, item){
var id = parseInt($(item).prop('id'));
id = index + 2; //First start button starts with id=2 as in "delete 2nd form"
console.log('id after '+id);
$(item).prop('id', id);
});
});
Basicaly take the formwrappers to know how many forms are there, take each children (form-group) and then each children(control elements) and change their id's. Not having any trouble in speed yet, it works great, but don't like it's cleanness.
You can use .attr() like
$('button.delete').attr('id', function (index, item) {
return index + 2;
});
Demo: Fiddle