I need some help with a test calculator.
I managed to make the Add functionality work, but i'm stuck on what i have to do next in order to add an extra functionality like Multiply work when the Calculate button is pressed.
Here is a JSFiddle Link, and i will also add most of the code.
I chose Angular, but a jQuery example would do fine also.
Examples of the calculator lifecycle might be:
JS
angular.module('myApp', [])
.controller('MyController', function ($scope) {
$scope.items = [];
$scope.addItem = function(){
$scope.items.push({
myOperation: $scope.selectedOperation,
myNumber: $scope.selectedNumber
});
$scope.selectedOperation = '';
$scope.selectedNumber = '';
};
$scope.AddToTotal = function(){
var total = 0;
for(var i=0; i<$scope.items.length; i++){
total += $scope.items[i].myNumber;
}
return total;
}
});
Html
<body ng-app="myApp">
<div ng-controller="MyController" class="container">
<div class="row">
<div class=".col-md-6 .col-md-offset-3">
<form role="form" class="form-inline">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<!--Select-->
<select ng-model="selectedOperation" class="form-control input-lg" id="operators">
<option value="Add">Add</option>
<option value="Multiply">Multiply</option>
<option value="Apply">Apply</option>
</select>
<!--Input-->
<input ng-model="selectedNumber" class="form-control input-lg" type="number" placeholder="enter a number" />
<!--AddStep-->
<button ng-click="addItem()" id="btnAdd" class="btn btn-default btn-lg">Add step</button>
<p>{{selectedOperation}} {{selectedNumber}} = {{ AddToTotal()}}</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<ol id="instructions" class="jumbotron" style="margin-top: 2em;">
<li ng-repeat="item in items">{{item.myOperation}} {{item.myNumber}}</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<button ng-click="getTotal()" id="btnCalculate" class="btn btn-primary btn-lg">
Calculate
</button>
<button id="btnReset" class="btn btn-danger btn-lg">Reset</button>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Result:
<span id="result" class="result">{{ AddToTotal() }}</span>
</h2>
</div>
</div>
</form>
</div>
</div>
</div>
Update your AddToTotal function with this:
$scope.AddToTotal = function() {
var total = 0;
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].myOperation === 'Add') {
total += $scope.items[i].myNumber;
} else if ($scope.items[i].myOperation === 'Divide') {
total /= $scope.items[i].myNumber;
} else if ($scope.items[i].myOperation === 'Subtract') {
total -= $scope.items[i].myNumber;
} else if ($scope.items[i].myOperation === 'Multiply') {
total *= $scope.items[i].myNumber;
}
}
return total;
}
Related
I've created a clone function on html file. But there's a weird error in code. when I put two ending 'div' in same line, the JavaScript code just work fine. but when I beautify html code or put the last ending tag in another line, the JavaScript just doesn't work. please look at the commented line
<body>
<div class="container">
<div class="col-2 m-3 bg-primary" id="show">working</div>
<button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>
<div id="error" class="text-danger ml-3"></div>
<div id="myList" style="list-style-type:none;" class="mt-3">
<div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"
onclick="removeIt()">X</button>
</div>
</div>
</div></div> <!-- this line is causing issue -->
<button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>
<div class="form-check">
<label class="form-check-label" for="numbers">
Number Of Row
</label>
<input type="number" class="form-input" name="" id="numbers" value="1">
</div>
<button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
let error = document.getElementById('error');
function passNumber(){
let numbers = document.getElementById('numbers').value;
for(let i = 1; i <= numbers; i++){
addElement();
}
}
function hide() {
document.getElementById('show').style.display = 'none';
}
function addElement() {
error.innerHTML = '';
let item = document.getElementById('myList').lastChild;
let cln = item.cloneNode(true);
document.getElementById('myList').appendChild(cln);
}
function removeIt() {
let list = document.getElementById('myList');
if(list.childNodes.length == 2){
error.innerHTML=`you cant delete the last input box`;
}else{
let length = list.childNodes.length;
list.removeChild(list.childNodes[length-1]);
}
}
</script>
this code works fine. but when I change the code into below lines, then the JavaScript just don't work at all -
<body>
<div class="container">
<div class="col-2 m-3 bg-primary" id="show">working</div>
<button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>
<div id="error" class="text-danger ml-3"></div>
<div id="myList" style="list-style-type:none;" class="mt-3">
<div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"
onclick="removeIt()">X</button>
</div>
</div>
</div>
</div> <!-- this line is causing issue -->
<button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>
<div class="form-check">
<label class="form-check-label" for="numbers">
Number Of Row
</label>
<input type="number" class="form-input" name="" id="numbers" value="1">
</div>
<button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
let error = document.getElementById('error');
function passNumber(){
let numbers = document.getElementById('numbers').value;
for(let i = 1; i <= numbers; i++){
addElement();
}
}
function hide() {
document.getElementById('show').style.display = 'none';
}
function addElement() {
error.innerHTML = '';
let item = document.getElementById('myList').lastChild;
let cln = item.cloneNode(true);
document.getElementById('myList').appendChild(cln);
}
function removeIt() {
let list = document.getElementById('myList');
if(list.childNodes.length == 2){
error.innerHTML=`you cant delete the last input box`;
}else{
let length = list.childNodes.length;
list.removeChild(list.childNodes[length-1]);
}
}
</script>
lastChild is the last child node of any kind, including text nodes. By moving the closing </div> tag, you're adding a text node.
You could use lastElementChild instead to get only the last element in the list.
Here's a simplified example:
console.log(document.getElementById("container1").childNodes.length); // 2
console.log(document.getElementById("container2").childNodes.length); // 3
<div id="container1">
<div>x</div></div>
<div id="container2">
<div>x</div>
</div>
Side note: Your HTML is invalid. div elements cannot be direct children of ul elements. ul elements are expected to contain li elements as their only direct (element) children.
I search all on how to have two controllers, but it won't work. Is there anything wrong in my HTML? Is there anything wrong in my script?
Javascript code:
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = [];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (x) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
var topics = angular.module("myList", []);
topics.controller("topicCtrl", function($scope) {
$scope.products = [];
$scope.addItem = function () {
$scope.errortext = "";
if (!$scope.addMe) {return;}
if ($scope.products.indexOf($scope.addMe) == -1) {
$scope.products.push($scope.addMe);
} else {
$scope.errortext = "The item is already in your shopping list.";
}
}
$scope.removeItem = function (y) {
$scope.errortext = "";
$scope.products.splice(x, 1);
}
});
angular.bootstrap(document.getElementById("app2"), ['myList']);
function addElement(value)
{
var dropdown = document.getElementById("OperationType");
var current_value = dropdown.options[dropdown.selectedIndex].value;
if (current_value == "Others") {
document.getElementById("OperationNos").style.display = "block";
}
else {
document.getElementById("OperationNos").style.display = "none";
}
}
function addElement2(value)
{
var dropdown = document.getElementById("topic");
var current_value = dropdown.options[dropdown.selectedIndex].value;
if (current_value == "Others") {
document.getElementById("usr").style.display = "block";
}
else {
document.getElementById("usr").style.display = "none";
}
}
HTML CODE:
<!--STANDARDS -->
<td>
<div ng-app="myShoppingList" ng-controller="myCtrl" id="app1" class="panel panel-default" style="max-width:400px;">
<div class="panel-heading">
<h3>
<select name="type" class="form-control" id="OperationType" onchange="addElement(this.value)" name="location">
<option value="Teacher">Teacher</option>
<option value="Coordinator">Coordinator</option>
<option value="Others">Others</option>
</select>
<input type="text" id="OperationNos"style="border: none;"class="form-control" placeholder="Input Title" value="{{x}}" >
</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li ng-repeat="x in products" class="list-group-item">
<input type="text" style="border: none;"class="form-control" value="{{x}}" id="usr">
<span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" ng-model="addMe" placeholder="Add description">
<span class="input-group-btn">
<button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button>
</span>
</div>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</div>
</div>
</td>
<!-- END OF STANDARDS -->
<!--TOPICS -->
<td>
<div ng-app="myList" ng-controller="topicCtrl" id="app2" class="panel panel-default" style="max-width:400px;">
<div class="panel-heading">
<h3>
<select name="type" class="form-control" id="topic" onchange="addElement2(this.value)" name="topic">
<option value="Teacher">Teacher</option>
<option value="Coordinator">Coordinator</option>
<option value="Others">Others</option>
</select>
<input type="text" id="topics"style="border: none;"class="form-control" placeholder="Input Title" value="{{y}}" ></h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li ng-repeat="y in products" class="list-group-item">
<input type="text" style="border: none;"class="form-control" value="{{y}}" id="usr">
<span ng-click="removeItem($index)" style="cursor:pointer;" class="text-right">×</span>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" ng-model="addMe" placeholder="Add description">
<span class="input-group-btn">
<button class="btn btn-secondary btn-success" ng-click="addItem()" type="button">Add</button>
</span>
</div>
</div>
</div>
<p class="w3-padding-left w3-text-red">{{errortext}}</p>
</div>
</div>
</td>
<!-- END OF TOPICS -->
See the angularjs doc
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.
To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
AngularJS applications cannot be nested within each other.
Do not use a directive that uses transclusion on the same element as ngApp. This includes directives such as ngIf, ngInclude and ngView. Doing this misplaces the app $rootElement and the app's injector, causing animations to stop working and making the injector inaccessible from outside the app.
I need help approaching the problem better or guide me a bit, I'm new angular.
I must first iterate a list of headers of a .csv file that list I have to make a match of three predefined fields, the remaining headers I have to generate a ng-repeat for so for each record generating radiobuttons and inputs with information I serve to create a new object, but when I click on the button that sends through the data ng-click on the controller this undefined
//controller
app.controller('fileController', [
'$scope',
'$http',
'ngAuthSettings',
'$location',
'localStorageService',
'fileService', '$rootScope', function ($scope, $http, ngAuthSettings, $location, localStorageService, fileService, $rootScope) {
var serviceBase = ngAuthSettings.apiServiceBaseUri;
var headersMatch = [];
var _lista_de_Headers = [];
var _lista_de_tags = [];
var _lista_de_header_splice = [];
$scope.restantesTag = [];
$scope.displayed = false;
$scope.secondDisplay = false;
//this is ok, get data from api and the header of file uploaded
$scope.uploadFile = function () {
var file = $scope.recipient;
fileService.uploadFileToUrl(file).then(
function (results) {
_lista_de_Headers = results.data.Headers;
_lista_de_header_splice = angular.copy(results.data.Headers);
_lista_de_tags = results.data.Tags;
$scope.displayed = true;
$scope.listaDeHeaders = _lista_de_Headers;
},
function (error) {
var errors = [];
for (var key in error.data.modelState) {
for (var i = 0; i < error.data.modelState[key].length; i++) {
errors.push(error.data.modelState[key][i]);
}
}
$scope.message = "Falla n:" + errors.join(' ');
}
);
};
//iterates the received data and creates an object with three main fields match
$scope.headerPpal = function (item) {
angular.forEach(item, function (index, element) {
headersMatch.push({
'Header': { "numberColumn": index.numberColumn, "nameColumn": element },
'Match': index.nameColumn,
'isReplace': false,
'Rename': null
});
angular.forEach(_lista_de_header_splice, function (i, obj) {
if (i.nameColumn === index.nameColumn) {
_lista_de_header_splice.splice(obj, 1);
};
});
});
$scope.secondDisplay = true;
$scope.restantesTag = _lista_de_header_splice;
$scope.listaDeTags = _lista_de_tags;
$rootScope.headersMatch = headersMatch;
$rootScope.lista_de_header_splice = _lista_de_header_splice;
};
$scope.mivariable = function (item) {
//Here is undefined the item
};
}]);
in the view
<div id="wrapper">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h4 class="page-header">Mantenedor de Archivos</h4>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Subir archivo
</div>
<div class="panel-body">
<div class="col-lg-12">
<div class="upl form-group pull-left col-lg-10">
<label for="file-upload" class="custom-file-upload btn btn-block btn-info pull-right">
<i class="fa fa-cloud-upload"></i> Seleccione archivo...
</label>
<input id="file-upload" type="file" file-model="recipient" />
</div>
<div class="form-group pull-left col-lg-2">
<input type="button" class="btn btn-primary" ng-click="uploadFile()" value="Subir" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" ng-show="displayed">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Seleccione Campos principales:
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group col-lg-4 center-block">
<span>
Email
<select ng-model="header.Email" ng-options="item.nameColumn for item in listaDeHeaders">
<!--<option value="null">No aplica</option>-->
</select>
</span>
</div>
<div class="form-group col-lg-4 center-block">
<span>
Nombre
<select ng-model="header.Name" ng-options="item as item.nameColumn for item in listaDeHeaders">
<option value="dontHave">No aplica</option>
</select>
</span>
</div>
<div class="form-group col-lg-4 center-block">
<span>
Fecha Nacimiento
<select ng-model="header.BirthDate" ng-options="item as item.nameColumn for item in listaDeHeaders">
<option value="dontHave">no aplica</option>
</select>
</span>
</div>
</div>
<div class="form-group col-lg-12">
<button id="step1_next" class="btn btn-primary pull-right" ng-click="headerPpal(header)">
siguiente
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" ng-show="secondDisplay">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Agregue configuracion de Tags:
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div ng-repeat="tag in restantesTag">
<div>
<input type="text" data-ng-model="tag.nameColumn" class="form-control success" placeholder="{{tag.nameColumn}}" value="{{tag.nameColumn}}" disabled>
<input type="text" data-ng-model="tag.numberColumn" value="{{tag.numberColumn}}" hidden>
</div>
<div>
<input type="radio" data-ng-model="tag.isReplace" value="true" />Agregar<br />
<input type="radio" data-ng-model="tag.isReplace" value="false" />Reemplazar
</div>
<div>
<span>
<select data-ng-model="tag.Header" ng-options="x for x in listaDeTags">
<option value="">No aplica</option>
</select>
</span>
</div>
<div><input type="text" data-ng-model="tag.Value" class="form-control"></div>
</div>
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-primary pull-right" ng-click="mivariable(tag)">
Guardar
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thank you so much for everything !!
I would like to create dynamically some input fields, that I used ng-repeat with ng-model. I meet some problems. ng-model without ng-repeat works correctly (transitPointStart). transits should work exactly the same, but they don't. What am I missing?
(link to plunker on the bottom)
transitPointStart:
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start">Start Point</label>
<input type="text" class="form-control" name="field_start" id="field_start"
ng-model="transitPointStart.city" placeholder="e.g. London"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start_date">Date</label>
<div class="input-group">
<input id="field_start_date" type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM"
name="field_start_date"
datetime-picker="{{dateformat}}" ng-model="transitPointStart.date"
is-open="datePickerOpenStatus.field_start_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalendar('field_start_date')"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
transits:
<div class="row" ng-repeat="transit in transits">
<!--TEST-->
<!--<div> Model: {{transit.modelName}} </div>-->
<!--<div> dateModel: {{transit.dateModelName}} </div>-->
<!--<div> datePicker: {{transit.datePickerName}} </div>-->
<!--<div> fieldName: {{transit.fieldName}} </div>-->
<!--<div> fieldDateName: {{transit.fieldDateName}} </div>-->
<!--<div> button: {{transit.buttonDateName}} </div>-->
<!--/TEST-->
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldName">Transit {{$index+1}}</label>
<input type="text" class="form-control" name="transit.fieldName" id="transit.fieldName"
ng-model="transit.modelName" placeholder="transit"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldDateName">Date {{$index+1}}</label>
<div class="input-group">
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g"
name="transit.fieldDateName"
datetime-picker="{{dateformat}}" ng-model="transit.dateModelName"
is-open="transit.datePickerName"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="transit.buttonDateName"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-2">
<span class="btn btn-primary" ng-click="addTransit()" ng-if="transits.length < 3">Add transit</span>
</div>
<div class="col-lg-2"></div>
</div>
controller:
$scope.transits = [];
$scope.addTransit = function () {
var tempId = $scope.transits.length + 1;
var tempName = "transitPoint_" + tempId;
var tempModelName = tempName + ".city"; // Here I would like to have access to transitPoint.city
var tempDateName = tempName + ".date"; // as above (transitPoint.date)
var tempDate = "datePickerOpenStatus.field_transit_date_" + tempId;
var tempFieldName = "field_transit_" + tempId;
var tempFieldDateName = "field_transit_date_" + tempId;
var tempButton = "openCalendar('" + tempFieldDateName + "')";
$scope.transits.push({
modelName: tempModelName,
dateModelName: tempDateName,
datePickerName: tempDate,
fieldName: tempFieldName,
fieldDateName: tempFieldDateName,
buttonDateName: tempButton
});
}
/*
{...} - rest of code, sending queries (vm.save() ect.)
*/
$scope.datePickerOpenStatus = {};
$scope.datePickerOpenStatus.field_start_date = false;
$scope.datePickerOpenStatus.field_end_date = false;
// I should've used loop here
$scope.datePickerOpenStatus.field_transit_date_1 = false;
$scope.datePickerOpenStatus.field_transit_date_2 = false;
$scope.datePickerOpenStatus.field_transit_date_3 = false;
$scope.openCalendar = function (date) {
$scope.datePickerOpenStatus[date] = true;
};
Demo: Plunker
Some of the bindings in your HTML are not correct. You need to use interpolation (the {{ }} format) whenever you need to emit data from the model into the HTML.
For example, when assigning IDs, you have:
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ...
This should be:
<input id="{{transit.fieldDateName}}" type="text" class="form-control" placeholder="e.g" name="{{transit.fieldDateName}}" ...
Second, your ng-click syntax is not correct. You should not create the openCalendar expression in JavaScript, but in your HTML, like so:
<button type="button" class="btn btn-default" ng-click="openCalendar(transit.fieldDateName)">
I think your Plnkr is missing some scripts and/or steps to make the calendar work, but these changes will at least cause your openCalendar function to get called.
I have this html:
<div class="info">
<div class="form-group">
<label class="control-label col-sm-2">Title</label>
<div class="col-xs-10 col-sm-8">
<input id="titleInfo" class="form-control" type="text" placeholder="Title">
</div>
<div class="col-xs-1 col-sm-1">
<button class="btn btn-default remove_field"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Text</label>
<div class="col-xs-10 col-sm-8">
<textarea id="textInfo" class="form-control" type="text" placeholder="..."></textarea>
</div>
</div>
</div>
Into my jsp I have many of this:
<div class="info">
...
</div>
<div class="info">
...
</div>
<div class="info">
...
</div>
Now, I would change the id tags: titleInfo and textInfo of every div with class info in ascending order.
<div class="info">
..<input id="titleInfo1"..
..<textarea id="textInfo1"..
</div>
<div class="info">
..<input id="titleInfo2"..
..<textarea id="textInfo2"..
</div>
<div class="info">
..<input id="titleInfo3"..
..<textarea id="textInfo3"..
</div>
and so on.
I thought to iterate by class info:
var x = 1;
$(".info").each(function() {
//Now, I don't know how to change the ids
x++;
});
You need to update the code to following
var x = 1;
$(".info").each(function() {
var elems = $(this).find(".form-control"); // get all the input elements with class form-control
elems.each(function() { // iterate over the elements
$(this).attr("id", $(this).attr("id") + x); // update id
});
x++;
});
Update
var x = 1;
$(".info").each(function() {
var elems = $(this).find(".form-control"); // get all the input elements with class form-control
$(elems[0]).attr("id", "titleInfo" + x);
$(elems[1]).attr("id", "textInfo" + x);
x++;
});
You should really do this server side, within the loop control you have that generates those blocks. For the sake of answering, here you go.
$(".info").each(function(index) {
var $title = $(this).find("#titleInfo");
var $text = $(this).find("#textInfo");
$title[0].id += (index+1);
$text[0].id += (index+1);
});
Take a look at this demo as well.
Find the below code snippet.
var x = 1;
$(".info").each(function() {
var ele=$(this).find('.form-control');
ele.each(function(){
setId($(this),x)
})
x++;
});
function setId(ele,x){
ele.attr('id',ele.attr('id')+x)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="info">
<div class="form-group">
<label class="control-label col-sm-2">Title</label>
<div class="col-xs-10 col-sm-8">
<input id="titleInfo" class="form-control" type="text" placeholder="Title">
</div>
<div class="col-xs-1 col-sm-1">
<button class="btn btn-default remove_field"><i class="fa fa-remove"></i></button>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Text</label>
<div class="col-xs-10 col-sm-8">
<textarea id="textInfo" class="form-control" type="text" placeholder="..."></textarea>
</div>
</div>
</div>
This also does the same.
Script
var x = 1;
$(".info").each(function() {
var ele=$(this).find('.form-control');
ele.each(function(){
$(this).attr('id',$(this).attr('id')+x)
})
x++;
});