We Keep Coding

how to clone div with event?

when I clone a div, I'd like the event "delete_row_sticker" to be cloned too but this isn't the case, I don't understand why.
html:
<div id="row_sticker_0" class="row mt-10 justify-content-around">
<div class="col-3">
<input type="text" id="width_sticker_0" name="width_sticker_0" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="length_sticker_0 name="length_sticker_<?= $var?>" class="form-control">
</div>
<div class="col-3">
<input value="foo" type="text" id="quantity_stickers_0" name="quantity_stickers_0" class="form-control">
</div>
<div class="col-3">
<div id="delete_0" value="0" name="delete_0" class="hide delete_row_sticker">RAZ</div>
</div>
</div>
<div id="add_row_sticker" class="col-12">
<div><i class="fa-solid fa-plus"></i></div>
</div>
jquery to clone the div "row_sticker_0":
$(document).ready(function(){
var i = 1;
$("#add_row_sticker").click(function(){
var row_sticker_id = 'row_sticker_' + i;
$("#row_sticker_0").clone().appendTo("#sticker_added").prop('id', row_sticker_id);
$('#'+row_sticker_id +' input').each(function(value) {
value.value = "";
value.id += '_'+ i;
value.name += '_'+ i;
});
$('#'+row_sticker_id +' #delete_0').each(function(value) {
value.id = $('#'+row_sticker_id +' #delete_0').attr('id').slice(0,6);
value.id += '_'+ i;
});
i++;
});
});
jquery to delete a row:
$(document).ready(function(){
$(".delete_row_sticker").on('click', function() {
var index = $(this).attr('id');
index = index.slice(7, 8);
$('#row_sticker_' + index).remove();
});
});

Use data-attribute values to select form fields and autofill from MySQL

I am trying to succeed with populating dynamically generated form fields from a database via xmlhttp. First row is "static" and when I type in the SKU-field the name[] field gets the data correct from the database. When I click the "#addrow" button a new row is added and here I want to be able to type in the SKU-field and have the name[] field get data from the database. Right now what happens is that the row above gets updated when I type in the SKU-field.
I have added data-attributes for the SKU-field and name-field and also a counter so I somehow could select the field data-names and from this be able to parse the value to the right name-field in the right row?
I have tried to add a variable and see if I can get this to parse the database value to the right name-field, but it does not work:
var field = "name" + $(this).attr("data-dynid");
field.value = myObj[0];
I just need to figure out how to have the code recognize which SKU-field I am typing in (with the data-attribute counter) and from the counter select the name-field with the same counter value.
*** UPDATE ****
So I found a way to locate a form field from data-attribute and assign a value to it. Now I need to figure out how to have the code recognize the SKU field I am typing in, in order to retreive the SKU data-attribute number and use this dynamically to locate the form field to parse the data to.
var elements = document.querySelectorAll('[data-dynname="name-1"]');
elements[0].value = myObj[0];
HTML
<form method="post" action="">
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="row">
<div class="form-group col-md-2">
<label class="form-control-label" for="sku">Varenummer</label>
<input type="text" class="form-control searchInput" name="sku[]" placeholder="Varenummer" autocomplete="off" onkeyup="GetDetail(this.value)" value="">
</div>
<div class="form-group col-md-4">
<label class="form-control-label" for="name">Navn</label>
<input type="text" class="form-control name" name="name[]" placeholder="Navn" autocomplete="off">
</div>
<div class="form-group col-md-2">
<label class="form-control-label" for="content">Tekst</label>
<input type="text" class="form-control" name="text[]" placeholder="Tekst" autocomplete="off">
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="normalprice">Normalpris</label>
<input type="text" class="form-control" name="beforeprice[]" placeholder="Normalpris" autocomplete="off">
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="offerprice">Tilbudspris</label>
<input type="text" class="form-control" name="offerprice[]" placeholder="Tilbudspris" autocomplete="off">
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="size">Størrelse</label>
<select class="form-control" name="size[]" placeholder="Størrelse" autocomplete="off">
<option value="A4" selected="">A4</option>
<option value="A5">A5</option>
<option value="A10">A10</option>
</select>
</div>
<div class="form-group col-md-1">
<label class="form-control-label" for="removeRow"> </label>
<button id="removeRow" type="button" class="form-control btn btn-danger">Fjern</button>
</div>
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add Row</button>
</div>
</div>
</form>
Javascript
<script type="text/javascript">
// add row
var counter = 1;
$("#addRow").click(function () {
var html = '';
html += '<div id="inputFormRow">';
html += '<div class="row">';
html += '<div class="form-group col-md-2">';
html += '<input type="text" class="form-control searchInput" data-dynid ="' + counter + '" name="sku[]" placeholder="Varenummer" autocomplete="off" onkeyup="GetDetail(this.value)">';
html += '</div>';
html += '<div class="form-group col-md-4">';
html += '<input type="text" class="form-control name" data-dynname ="name-' + counter + '" name="name[]" placeholder="Navn" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-2">';
html += '<input type="text" class="form-control" name="text[]" placeholder="Tekst" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<input type="text" class="form-control" name="beforeprice[]" placeholder="Normalpris" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<input type="text" class="form-control" name="offerprice[]" placeholder="Tilbudspris" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<input type="text" class="form-control" name="size[]" placeholder="Størrelse" autocomplete="off">';
html += '</div>';
html += '<div class="form-group col-md-1">';
html += '<button type="button" class="form-control btn btn-danger removeRow">Fjern</button>';
html += '</div>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
counter++;
console.log(counter);
});
// remove row
$(document).on('click', '.removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
</script>
<script>
// onkeyup event will occur when the user
// release the key and calls the function
// assigned to this event
function GetDetail(str) {
if (str.length == 0) {
document.getElementsByName("first_name")[0].value = "";
return;
}
else {
// Creates a new XMLHttpRequest object
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
// Defines a function to be called when
// the readyState property changes
if (this.readyState == 4 &&
this.status == 200) {
// Typical action to be performed
// when the document is ready
var myObj = JSON.parse(this.responseText);
// Returns the response data as a
// string and store this array in
// a variable assign the value
// received to first name input field
//var el = document.getElementsByName('name[]')[0];
//var el = document.getElementsByClassName("name");
//var r2 = console.log(el).closest("name[]");
document.getElementsByName("name[]")[0].value = myObj[0];
//r2.value = myObj[0];
}
};
// xhttp.open("GET", "filename", true);
xmlhttp.open("GET", "pages/actions/load-products.php?user_id=" + str, true);
// Sends the request to the server
xmlhttp.send();
}
}
</script>

Use two classes in the same function

I have two functions like this:
1:
$(".soma").blur(function(){
var total = 0;
$(".soma").each(function(){
total = total + Number($(this).val().replace(/\s/g, ''));
});
$("#sub").val(total);
});
2:
$(".soma1").blur(function(){
var total1 = 0;
$(".soma1").each(function(){
total1 = total1 + Number($(this).val().replace(/\s/g, ''));
});
$("#sub1").val(total1);
});
I need to get the difference between the two and put the value in the input in real time.
My code that doesn't work:
$(".soma").blur(function(){
var total4 = 0;
$(".soma").each(function(){
total4 = total4 + Number($(this).val().replace(/\s/g, ''));
});
$(".soma1").blur(function(){
$(".soma1").each(function(){
total5 = total5 + Number($(this).val().replace(/\s/g, ''));
});
total6 = total4 - total5;
$("#sub1").val(total6.toFixed(2));
});
});
HTML:
<div class="form-group col-xs-1">
<input type="text" class="form-control1 Preco soma" name="Valor[]" value="0.00" required>
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="Valor">Total</label>
</div>
<div class="form-group col-xs-2">
<input type="text" class="form-control1 Preco soma1" name="Compra[]" value="0.00" required>
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="Compra">Valor de Compra</label>
</div>
<div class="form-group col-xs-4" style="float:right; margin-right: 2%; line-height: 2;">
<input type="text" class="form-control1" name="sub" id="sub3" readOnly="true" value="">
<span class="form-highlight">$</span>
<span class="form-bar"></span>
<label class="label1" for="sub3">Diferença em Valor</label>
</div>
I don't just click on a function because they are two different sums.

Just do both calculations in one change.
$(".soma1, .soma").blur(function(){
var total1 = 0;
var total = 0;
$(".soma1").each(function(){
total1 = total1 + Number($(this).val().replace(/\s/g, ''));
});
$(".soma").each(function(){
total = total + Number($(this).val().replace(/\s/g, ''));
});
console.log(total - total1);
});

Dynamic append DIV and calculate data inside the div using class name in JQuery

I want to create a div to add the input field using the class name and display the value, and also create a button to add more field that has the same class as above, but only the first field can be used to add the input, I know how I tried is incorrect. I don't want to use ID, increase ID or related to ID. It may be better to increase the class name also but is there any way to keep the same class name and function working. Thanks in advance
Edited: My question part and my snippet part is not same for better understanding.
function addMoreSchedule8WDV() {
// alert('yeah');
$("#sch8_wdv").append('<div style="border-style: dotted; border-radius: 10px; border-width: thin; margin-top: 10px;">' +
'<div class="col-md-12">' +
'<div class="row">' +
'<div class="col-md-2">' +
'<label for="assetName">Name</label><br>' +
'<input type="text" id="assetName" class="form-control">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDOP">DOP</label><br>' +
'<input type="date" id="assetDOP" class="form-control date_of_purchase">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetOC">OC</label><br>' +
'<input type="number" min="0" id="assetOC" class="form-control originalCost">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetWDV">WDV</label><br>' +
'<input type="number" min="0" id="assetWDV" class="form-control assWDV">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetADD">ADD</label><br>' +
'<input type="number" min="0" id="assetADD" class="form-control addition">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetEUL">EUL</label><br>' +
'<input type="number" min="0" id="assetEUL" class="form-control no_of_year">' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-md-12" style="padding-bottom: 10px;">' +
'<div class="row">' +
'<div class="col-md-2">' +
'<label for="assetBDA">BDA</label><br>' +
'<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDays">Day Used</label><br>' +
'<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetRateofDep">Rate of Dep.</label><br>' +
'<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetDepAmount">Dep. Amount</label><br>' +
'<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="assetNetBlock">Net Block</label><br>' +
'<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">' +
'</div>' +
'<div class="col-md-2">' +
'<label for="removeWDV">Remove</label><br>' +
'Remove Content' +
'</div>' +
'</div>' +
'</div>' +
'</div>');
$("#sch8_wdv").on("click", ".removeSch8", function() {
$(this).parent().parent().parent().parent().remove();
});
}
// trigger for Fixed Assets WDV
$(document).on('change', '#yearEnd, .date_of_purchase, .no_of_year, .addition, .originalCost, .assWDV', function() {
calculateWDVFixedAssets();
});
// end triggered
function calculateWDVFixedAssets() {
var current_year_input = $("#yearEnd").val()
var current_year = new Date(current_year_input + '-03-31');
var last_year = current_year_input - 1;
var last_year_correct = new Date(last_year + '-04-01');
var date_of_purchase = new Date($(".date_of_purchase").val());
var no_of_year = $('.no_of_year').val();
var original_cost = $('.originalCost').val();
var addition = $('.addition').val();
var wdv = $('.assWDV').val();
var bda, dayUsed;
if (last_year_correct < date_of_purchase) {
$(".originalCost").prop('disabled', true);
} else {
$(".originalCost").prop('disabled', false);
}
// below code is for calculate Day Used
if (date_of_purchase != '') {
if (date_of_purchase < last_year_correct) {
dayUsed = 365;
$(".dayUsed").val(dayUsed);
} else if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
dayUsed = Math.round(Math.abs((current_year.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
$(".dayUsed").val(dayUsed);
} else {
$(".dayUsed").val('');
$(".originalCost").val('');
console.log('error');
}
}
// below is for calculate BDA
if (no_of_year != '') {
if (date_of_purchase > last_year_correct && date_of_purchase < current_year) {
bda = (no_of_year * 365);
$(".bdaValue").val(bda);
} else if (date_of_purchase < last_year_correct) {
var bda2 = (no_of_year * 365);
var year_minus = Math.round(Math.abs((last_year_correct.getTime() - date_of_purchase.getTime()) / (24 * 60 * 60 * 1000)));
var total = (+bda2 - +year_minus);
$('.bdaValue').val(total + 1);
} else {
$(".originalCost").val('');
console.log('error');
}
}
// rate of depreciation
if (original_cost != '' || addition != '' || wdv != '') {
var bdaPass = $('.bdaValue').val();
var s = ((+original_cost + +addition) * (5 / 100));
var c = (+wdv + +addition);
var n = (bdaPass / 365);
var xy = (s / c);
var yz = (1 / n);
var power = Math.pow(xy, yz);
var power_new = parseFloat(power.toFixed(2));
var new_total = (1 - +power) * 100;
$('.rateOfDep').val(parseFloat(new_total.toFixed(4)));
// rate of depreciation
var rate_of_dep = $('.rateOfDep').val();
var f_rod = ((+wdv + +addition) * (rate_of_dep / 100));
var day_used_rod = $(".dayUsed").val();
var s_rod = (day_used_rod / 365);
var total_rod = (f_rod * s_rod);
var round_total = Math.round(total_rod);
$('.depAmount').val(round_total);
// net block
var f_netBlock = (+wdv + +addition);
var dep_net = $('.depAmount').val();
var net_block = (+f_netBlock - +dep_net);
$('.netBlock').val(parseFloat(net_block.toFixed(2)));
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<p> Try inserting Year Ended = 2018, Name = Test, DOP = 1st April, 2010, OC = 1250000, wdv = 686931, add = null(no need to enter), eul = 15 then it will give the output bda=2919, day used = 365, rate of dep = 25.8986, dep amt = 177906, net block = 509025..</p>
<p>Ignore the console error</p>
<div class="form-group">
<label for="yearEnd">Year Ended in</label>
<input type="number" min="0" name="yearEnded" id="yearEnd" class="form-control" placeholder="Eg:- 2001" required>
</div>
<div style="border-style: dotted; border-radius: 10px; border-width: thin;">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<label for="assetName">Name</label><br>
<input type="text" id="assetName" class="form-control">
</div>
<div class="col-md-2">
<label for="assetDOP">DOP</label><br>
<input type="date" id="assetDOP" class="form-control date_of_purchase">
</div>
<div class="col-md-2">
<label for="assetOC">OC</label><br>
<input type="number" min="0" id="assetOC" class="form-control originalCost">
</div>
<div class="col-md-2">
<label for="assetWDV">WDV</label><br>
<input type="number" min="0" id="assetWDV" class="form-control assWDV">
</div>
<div class="col-md-2">
<label for="assetADD">ADD</label><br>
<input type="number" min="0" id="assetADD" class="form-control addition">
</div>
<div class="col-md-2">
<label for="assetEUL">EUL</label><br>
<input type="number" min="0" id="assetEUL" class="form-control no_of_year">
</div>
</div>
</div>
<div class="col-md-12" style="padding-bottom: 10px;">
<div class="row">
<div class="col-md-2">
<label for="assetBDA">BDA</label><br>
<input type="number" readonly min="0" id="assetBDA" class="form-control bdaValue">
</div>
<div class="col-md-2">
<label for="assetDays">Day Used</label><br>
<input type="number" readonly min="0" id="assetDays" class="form-control dayUsed">
</div>
<div class="col-md-2">
<label for="assetRateofDep">Rate of Dep.</label><br>
<input type="number" readonly min="0" id="assetRateofDep" class="form-control rateOfDep">
</div>
<div class="col-md-2">
<label for="assetDepAmount">Dep. Amount</label><br>
<input type="number" readonly min="0" id="assetDepAmount" class="form-control depAmount">
</div>
<div class="col-md-2">
<label for="assetNetBlock">Net Block</label><br>
<input type="number" readonly min="0" id="assetNetBlock" class="form-control netBlock">
</div>
</div>
</div>
</div>
<div id="sch8_wdv"></div>
Add More

Working fiddle.
You could attach the input event to both inputs at the same time as:
$(document).on('input', '.first_no, .second_no', function() {
var parent = $(this).parent();
var first_no = parent.find('.first_no').val();
var second_no = parent.find('.second_no').val();
var total = parent.find('.total');
if (!isNaN(first_no) && !isNaN(second_no)) {
total.val(+first_no + +second_no);
}
});
function addMoreField() {
$('#expanded').append(
'<div><br>' +
'<input type="number" class="first_no">' +
' plus ' +
'<input type="number" class="second_no">' +
' is equal ' +
'<input type="number" class="total">' +
'</div>'
);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="number" class="first_no"> plus
<input type="number" class="second_no"> is equal
<input type="number" class="total">
</div>
<div id="expanded"></div>
<br>
<button onclick="addMoreField()">Add More</button>

Made a bit shorter version.
$(document).on('input', '.a, .b, .c', function() {
var i = $(this).parent().find('input');
i[2].value = parseInt(i[0].value) + parseInt(i[1].value);
});
$('#add').on('click', function() {
$('.main').append('\
<div class="computation">\
<input type="number" class="a"> + \
<input type="number" class="b"> = \
<input type="number" class="c">\
</div>\
');
});
.computation {
padding: 15px;
padding-bottom: 0;
}
button {
margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="computation">
<input type="number" class="a"> +
<input type="number" class="b"> =
<input type="number" class="c">
</div>
</div>
<button id="add">Add more</button>

var addFields = function() {
var container = $(".dynamic-section");
var newFields = $(".row:first").clone();
$(newFields).find("input").val("");
container.append(newFields);
};
var add = function(num1, num2) {
num1 = (num1.length > 0 && !isNaN(num1)) ? parseInt(num1) : 0;
num2 = (num2.length > 0 && !isNaN(num2)) ? parseInt(num2) : 0;
return num1 + num2;
}
$(document).on("keyup", ".first,.second", function(e) {
var currentRow = $(e.target.parentElement);
var first = currentRow.find(".first").val();
var second = currentRow.find(".second").val();
var result = currentRow.find(".result");
result.val(add(first, second));
});
body {
padding: 10px;
}
.row {
padding: 10px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" >
<input type="number" class="first" placeholder="first"/> +
<input type="number" class="second" placeholder="second"/> =
<input type="number" class="result" placeholder="result"/>
</div>
<div class="dynamic-section"></div>
<button type="button" name="addFields" onclick="addFields()">Add fields</button>

JavaScript - Dynamic field with color adding too much fields

I created dynamic adding fields to form but I have problem with color input:
Standard inputs are added normally but input with color on first click is not adding and on next click 'Add field' is adding next fields with color to all inputs/.
Here is my code:
HTML:
<div class="form-group" id="propositionsFields">
<label class="col-md-4 control-label">Options</label>
<div class="row">
<div class="col-8">
<input class="form-control propositionField" name="proposition[]" type="text" />
</div>
<div class="col-2">
<input type="text" class="form-control jscolor {onFineChange:'updateColor(this)'}" />
<input type="hidden" class="color-picker" value="" />
</div>
<div class="col-2">
<button class="add-proposition-field propositionManage">Add field</button>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var addField = $(".add-proposition-field");
var removeField = $('.remove-proposition-field');
addField.click(function(e) {
var rodzic = $('.colorInput');
e.preventDefault();
var i = $('.propositionField').size();
var color = 'FF0000';
var input = document.createElement("input");
input.className = "form-control";
input.setAttribute("value", color);
input.setAttribute("type", 'text');
var picker = new jscolor(input);
var newField = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="Field No."/></div><div class="col-2 colorInput"></div><div class="col-2"><button class="remove-proposition-field propositionManage">Usuń pole</button></div></div>';
i++;
rodzic.append(input);
$(" #propositionsFields ").append(newField);
});
$('body').on('click', '.remove-proposition-field', function() {
$(this).parent('div').parent('div').remove();
});
});
Demo: https://jsfiddle.net/k95detc8/

The issue if because you add the element before is exist. And the colorInput content is added to all colorInput class. I have remove your first element and add last parameter for add only in the last element
$(document).ready(function() {
var addField = $(".add-proposition-field");
var removeField = $('.remove-proposition-field');
addField.click(function(e) {
e.preventDefault();
var i = $('.propositionField').size();
var color = getRandomColor();
var input = document.createElement("input");
input.className = "form-control";
input.setAttribute("value", color);
input.setAttribute("type", 'text');
var picker = new jscolor(input);
var newField = '<div class="row"><div class="col-8"><input autocomplete="off" class="form-control" name="proposition[]" type="text" placeholder="Field No."/></div><div class="col-2 colorInput"></div><div class="col-2"><button class="remove-proposition-field propositionManage">Usuń pole</button></div></div>';
i++;
$(" #propositionsFields ").append(newField);
$('.colorInput:last').append(input);
});
$('body').on('click', '.remove-proposition-field', function() {
$(this).parent('div').parent('div').remove();
});
});
function updateColor(jscolor) {
$('.color-picker').val(jscolor);
$(this).val(jscolor);
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
div{
width:100% !important
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="http://beta.leonardo.pl/afrisoexpert/public/css/fluidable.css" rel="stylesheet"/>
<div class="form-group" id="propositionsFields" >
<label class="col-md-4 control-label">Options</label>
<div class="row">
<div class="col-8">
<input class="form-control propositionField" name="proposition[]" type="text" />
</div>
<div class="col-2">
<input type="text" class="form-control jscolor {onFineChange:'updateColor(this)'}" />
<input type="hidden" class="color-picker" value="" />
</div>
<!-- /.col-2 -->
<div class="col-2">
<button class="add-proposition-field propositionManage">Add field</button>
</div>
<!-- /.col-2 -->
</div>
<!-- /.row -->
</div>
<!-- /.form-group -->