We Keep Coding

Giving different ID to dynamically created button in jQuery

I am trying to create a set of textboxes using jQuery and give them ids. I need give id only textboxes.
It doesn't have to be the same ids I gave right now, there may be other. I couldn't figure out how. Is there can any help?
var cT = '<hr>';
cT += ' <div id="divMessageProfile"></div>';
cT += ' <div class="form-group" id="modalStockAdd" >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <label class="pull-left">Barkod No</label> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <label class="pull-left">Adet</label> ';
cT += ' </div >';
cT += ' </div >';
cT += ' <div class="row">'
cT += ' <div class="col-lg-9 col-sm-9" >';
cT += ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> ';
cT += ' </div >';
cT += ' <div class="col-lg-3 col-sm-3" >';
cT += ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> ';
cT += ' </div >';
cT += ' </div >';
cT += ' </div >';
jQuery(document).on('click', '#btnContinue', function () {
$('#modalStockAdd').append(
' <div class="col-lg-9 col-sm-9" >'
+ ' <label class="pull-left">Barkod No</label> '
+ ' </div >'
+ ' <div class="col-lg-3 col-sm-3" >'
+ ' <label class="pull-left">Adet</label> '
+ ' </div >'
+ ' </div >'
+ ' <div class="row">'
+ ' <div class="col-lg-9 col-sm-9" >'
+ ' <input type="text" id="txtBarkod" class="form-control border-input" placeholder="Barkod No Giriniz"> '
+ ' </div >'
+ ' <div class="col-lg-3 col-sm-3" >'
+ ' <input type="text" id="txtPiece" class="form-control border-input pull-left" placeholder="Adet Giriniz"> '
+ ' </div > '
)
});

If i understadn you right this will do the job for you just adapt it for your html
var number = 0;
$('button').on("click", function(){
var html = '<p>number '+number+'</p>'
$('#message').append(html);
number++
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Append</button>
<div id="message"></div>

How to put input value in card-title and card-text

I'm new from scripting world so sorry for my bad factory code.
I'm trying to make appear the input value in "card title" and "card-text" of my "cards" variable
Here is the code:
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>
<script>
$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title"></h5>' +
'<p class="card-text"></p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
</script>
Thanks everyone for the help!

You can achieve that in the way like this:
$(document).ready(function() {
$("#create").click(function() {
let cards =
'<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
`<h5 class="card-title">${$('#input1').val()}</h5>` +
`<p class="card-text">${$('#input2').val()}</p>` +
'<button class="btn btn-primary">Go somewhere</button>' +
"</div>" +
"</div>";
$(document.body).append(cards);
})

Try with the following:
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
Demo
$(document).ready(function() {
$("#create").click(function() {
var cardtitle = $('#input1').val();
var cardtext = $('#input2').val();
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+cardtitle+'</h5>' +
'<p class="card-text">'+cardtext+'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">
<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">
<button class="btn btn-success" id="create">Create</button>

$(document).ready(function(){
$("#create").click(function(){
let cards = '<div class="card" style="width: 18rem;">' +
'<div class="card-body">' +
'<h5 class="card-title">'+ $('#input1').val() +'</h5>' +
'<p class="card-text">'+ $('#input2').val() +'</p>' +
'<button class="btn btn-primary">Go somewhere</button>' +
'</div>' +
'</div>';
$(document.body).append(cards);
});
});

How to get the id of a drop down list from different rows of a table?

I am currently working on a web app that lets the user create a survey like Google forms using asp.net C#. Right now having trouble getting the id of the generated drop down list that's why I can't put any field in the new rows here is the code for the form:
<div class="form-group" style="margin:auto; width:80%;">
<form name="add_question" id="add_question">
<asp:Label ID="Label1" runat="server" Text="Survey Title: " Font-Size="Large"></asp:Label>
<input type="text" name="title" id="title" class="form-control question_list" placeholder="Enter Survey Title"/>
<asp:Label ID="Label2" runat="server" Text="Description: " Font-Size="Large"></asp:Label>
<br>
<textarea rows="4" cols="100%" name="description" id="description" placeholder="Enter description"></textarea>
<table class="table" id="dynamic_field">
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
<tr id="row1">
<td style="width: 50%"><input type="text" name="question1" id="question1" class="form-control question_list" placeholder="Enter question"/></td>
<td style="width: 15%"><select name="type1" id="type1" class="dropdown">
<option selected></option>
<option value="1">Multiple Choice</option>
<option value="2">CheckBox</option>
<option value="3">Short Sentence</option>
<option value="4">Paragraph</option>
<option value="5">Line Scale</option>
</select></td>
<td style="width: 30%"></td>
<td style="width: 5%"> <button name="remove" id="1" class="btn btn-danger btn_remove"> X </button></td>
</tr>
</table>
<button type="button" name="add" id="add" class="btn btn-warning" > Add Question </button>
</form>
<button type="button" name="submit" id="submit" class="btn btn-success" > Submit </button>
</div>
And here is the code for generating the fields of the survey I'm making:
<script>
var i = 1;
$("#add").click(function () {
i++;
$("#dynamic_field").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$("#row" + button_id + "").remove();
});
$('#type1').change(function () {
var x = 1;
if ($(this).val() == '3') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$('#myInput' + x + '').remove();
var row = document.getElementById("row1");
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$('#myInput'+x+'').remove();
}
});
</script>
I'm also open for any ideas that can make this easier to create.

Create table like
<table class="table" id="dynamic_field">
<thead>
<tr>
<th style="width: 50%">Question</th>
<th style="width: 15%">Type of Question</th>
<th style="width: 30%">Fields</th>
<th style="width: 5%">Remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
When appending rows, append to tbody.
$("#add").click(function () {
i++;
$("#dynamic_field tbody").append('<tr id="row' + i + '"> <td> <input type="text" name="question' + i + '" id="question'
+ i + '" class="form-control question_list" placeholder="Enter question"/> </td><td><select name="type'
+ i + '" id="type' + i + '">'
+ '<option selected></option>'
+ '<option value="1">Multiple Choice</option>'
+ '<option value="2">CheckBox</option>'
+ '<option value="3">Short Sentence</option>'
+ '<option value="4">Paragraph</option>'
+ '<option value="5">Line Scale</option>'
+ '</select></td><td></td><td><button name="remove' + i + '" id="'
+ i + '" class="btn btn-danger btn_remove"> X </button> </td> </tr> ');
});
Change change event like this
$('#dynamic_field').on('change','[id^=type]',function () {
var x = 1;
if ($(this).val() == '3') {
$(this).closest('tr').find('[id^=myInput]').remove();
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><input id="myInput' + x + '" type="text" style="width: 80%" /></td>';
row.deleteCell(3);
}
else if ($(this).val() == '4') {
$(this).closest('tr').find('[id^=myInput]')
var row = $(this).closest('tr');
var z = row.insertCell(2);
z.innerHTML = '<td style="width: 30%"><textarea rows="2" cols="40" name="description" id="myInput' + x + '"></textarea></td>';
row.deleteCell(3);
} else {
$(this).closest('tr').find('[id^=myInput]')
}
});

Not working HTML table rows from jQuery append()

How to create rows in tables by append() that still be able to operate with math operations?
Now I have row in HTML including netto price, amount, discount, tax rate and brutto price - brutto price is shown after input netto and amount, tax is selected from , but it's working only for HTML generated row, not for jQuery append. How to fix it?
HTML
<table class="table table-striped table-bordered" id="invoice">
<thead>
<tr>
<th class="col-xs-0">Lp.</th>
<th class="col-xs-4">Towar/usługa</th>
<th class="col-xs-1">PKWiU</th>
<th class="col-xs-1">Ilość</th>
<th class="col-xs-1">Jedn.</th>
<th class="col-xs-1">Cena netto</th>
<th class="col-xs-1">Rabat</th>
<th class="col-xs-2">VAT</th>
<th class="col-xs-1">Cena brutto</th>
</tr>
</thead>
<tbody>
<tr>
<th><p class="form-control-static">1.</p></th>
<td>
<div class="form-group input-sm">
<input type="text" name="product[]" class="form-control" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="pkwiu[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="quantity[]" class="form-control quantity" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="unit[]" class="form-control">
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="nettoprice[]" class="form-control nettoprice" required>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="discount[]" class="form-control discount">
</div>
</td>
<td>
<div class="form-group">
<div class="col-xs-12">
<select class="form-control vatrate" name="vatrate[]" form="invoice">
<option value="0">zw.</option>
<option value="1.00">0%</option>
<option value="1.05">5%</option>
<option value="1.08">8%</option>
<option value="1.23" selected>23%</option>
</select>
</div>
</div>
</td>
<td>
<div class="form-group input-sm">
<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">
</div>
</td>
</tr>
</tbody>
</table>
jQuery
var x = 2;
$("#addProduct").click(function(){
$row = '<tr>' +
'<th>'+x+'.</th>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="product[]" class="form-control" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="pkwiu[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="quantity[]" class="form-control quantity" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="unit[]" class="form-control">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="nettoprice[]" class="form-control nettoprice" required>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="discount[]" class="form-control discount">' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group">' +
'<div class="col-xs-12">' +
'<select class="form-control vatrate" name="vatrate[]" form="invoice">' +
'<option value="0">zw.</option>' +
'<option value="1.00">0%</option>' +
'<option value="1.05">5%</option>' +
'<option value="1.08">8%</option>' +
'<option value="1.23" selected>23%</option>' +
'</select>' +
'</div>' +
'</div>' +
'</td>' +
'<td>' +
'<div class="form-group input-sm">' +
'<input type="text" name="bruttoprice[]" class="form-control bruttoprice" value="">' +
'</div>' +
'</td>' +
'</tr>';
$('#invoice > tbody:last').append($row);
x=x+1;
});
$("#deleteProduct").click(function(){
$("tbody > tr:last").remove();
if(x > 1) {
x = x - 1;
}
});
$('select').on('change', function () {
var vat = this.selectedOptions[0].value;
console.log(vat);
});
$(":input").on('input', function(){
var $tr = $(this).closest("tr");
var netto = parseFloat($tr.find('.nettoprice').val()),
quantity = parseFloat($tr.find('.quantity').val()),
vat = parseFloat($tr.find('.vatrate').val()),
discount = parseFloat($tr.find('.discount').val());
if(isNaN(discount)) {
discount = 1;
} else {
discount = discount / 100;
discount = 1 - discount;
}
if(vat == 0 || vat == -1) {
vat = 1;
}
var v = '';
console.log(netto, quantity, vat, discount);
if(!isNaN(netto) && !isNaN(vat) && !isNaN(quantity)) {
v = netto * quantity * discount * vat;
v = v.toFixed(2);
}
$tr.find('.bruttoprice').val(v.toString());
});

Remove the last or make it :last-child:
$('#invoice > tbody').append($row);
$('#invoice > tbody:last-child').append($row);

Either remove the :last from it:
$('#invoice > tbody').append($row);
or use it with .after() with the :last tr of the table:
$('#invoice > tbody tr:last').after($row);

Okay, I found mistake - function works fine now.
$(document).on('input', ':input', function(){
/* Foo */
});

Can't bind click event

I make a call to the function "add_reg", but when the new row is added the click event don't work, what can be happening? thanks
function add_reg(){
cant_empleados++;
if($('#id_zona').val() == 2){
var nuevo_reg = '<div style="clear:both"></div><div id="empleado_' + cant_empleados + '" class="cont_empleado" onmouseover="this.style.background=\'#F2F2F2\';" onmouseout="this.style.background=\'#FFFFFF\';"><div style="float:left; width:136px; padding-left:15px"><input name="existe_emp' + cant_empleados + '" id="existe_emp' + cant_empleados + '" type="hidden" value="n" /><input name="existe_reg' + cant_empleados + '" id="existe_reg' + cant_empleados + '" type="hidden" value="n" /><input name="cuil' + cant_empleados + '" type="text" id="cuil' + cant_empleados + '" value="" style="width:130px" alt="99-99999999-9" onblur="buscarNombre(this.value, ' + cant_empleados + ');" maxlength="13" tabindex="' + tab++ + '"/></div><div style="float:left; width:256px"><input name="apellido_y_nombre' + cant_empleados + '" type="text" id="apellido_y_nombre' + cant_empleados + '" style="width:250px" maxlength="20" tabindex="' + tab++ + '" value=""/></div><div style="float:left; width:106px"><input name="categoria' + cant_empleados + '" type="text" id="categoria' + cant_empleados + '" value="" style="width:100px" maxlength="7" tabindex="' + tab++ + '"/></div><div style="float:left; width:96px"><input name="retribucion_mensual' + cant_empleados + '" type="text" id="retribucion_mensual' + cant_empleados + '" alt="decimal" style="width:90px" onblur="calcular_porcentaje(' + cant_empleados + ');" tabindex="' + tab++ + '" value="" /></div><div style="float:left; width:auto"><input name="cotizacion_sindical' + cant_empleados + '" type="text" id="cotizacion_sindical' + cant_empleados + '" alt="decimal" value="" style="width:80px; background-color:#F1F1F1" readonly="readonly" /> </div><div style="float:left; width:auto"> <input type="checkbox" name="imputar_sss' + cant_empleados + '" id="imputar_sss' + cant_empleados + '" value="' + cant_empleados + '" checked="checked" /> <input name="sistema_social_solidario' + cant_empleados + '" type="text" id="sistema_social_solidario' + cant_empleados + '" alt="decimal" value="" style="width:55px; background-color:#F1F1F1" readonly="readonly" /> </div><div style="float:left; width:auto"> <input type="checkbox" name="imputar_rpp' + cant_empleados + '" id="imputar_rpp' + cant_empleados + '" value="' + cant_empleados + '" checked="checked" /> <input name="prestaciones_previsionales' + cant_empleados + '" type="text" id="prestaciones_previsionales' + cant_empleados + '" alt="decimal" value="" style="width:55px; background-color:#F1F1F1" readonly="readonly" /> </div><div style="float:left; width:auto"> <img src="./images/ic_borrar.gif" alt="Borrar" /></div></div>';
}else{
var nuevo_reg = '<div style="clear:both"></div><div id="empleado_' + cant_empleados + '" class="cont_empleado" onmouseover="this.style.background=\'#F2F2F2\';" onmouseout="this.style.background=\'#FFFFFF\';"><div style="float:left; width:136px; padding-left:15px"><input name="existe_emp' + cant_empleados + '" id="existe_emp' + cant_empleados + '" type="hidden" value="n" /><input name="existe_reg' + cant_empleados + '" id="existe_reg' + cant_empleados + '" type="hidden" value="n" /><input name="cuil' + cant_empleados + '" type="text" id="cuil' + cant_empleados + '" value="" style="width:130px" alt="99-99999999-9" onblur="buscarNombre(this.value, ' + cant_empleados + ');" maxlength="13" tabindex="' + tab++ + '"/></div><div style="float:left; width:256px"><input name="apellido_y_nombre' + cant_empleados + '" type="text" id="apellido_y_nombre' + cant_empleados + '" style="width:250px" maxlength="20" tabindex="' + tab++ + '" value=""/></div><div style="float:left; width:106px"><input name="categoria' + cant_empleados + '" type="text" id="categoria' + cant_empleados + '" value="" style="width:100px" maxlength="7" tabindex="' + tab++ + '"/></div><div style="float:left; width:96px"><input name="retribucion_mensual' + cant_empleados + '" type="text" id="retribucion_mensual' + cant_empleados + '" alt="decimal" style="width:90px" onblur="calcular_porcentaje(' + cant_empleados + ');" tabindex="' + tab++ + '" value="" /></div><div style="float:left; width:auto"><input name="cotizacion_sindical' + cant_empleados + '" type="text" id="cotizacion_sindical' + cant_empleados + '" alt="decimal" value="" style="width:80px; background-color:#F1F1F1" readonly="readonly" /> </div><div style="float:left; width:auto"> <input name="sistema_social_solidario' + cant_empleados + '" type="text" id="sistema_social_solidario' + cant_empleados + '" alt="decimal" value="" style="width:80px; background-color:#F1F1F1" readonly="readonly" /> </div><div style="float:left; width:auto"> <input name="prestaciones_previsionales' + cant_empleados + '" type="text" id="prestaciones_previsionales' + cant_empleados + '" alt="decimal" value="" style="width:80px; background-color:#F1F1F1" readonly="readonly" /> </div><div style="float:left; width:auto"> <img src="./images/ic_borrar.gif" alt="Borrar" /></div></div>';
}
$("#totales").before(nuevo_reg);
$("#empleado_" + cant_empleados).hide();
$("#empleado_" + cant_empleados).fadeIn();
$("#cant_empleados").val(cant_empleados);
$("#cuil" + cant_empleados).setMask();
$("#retribucion_mensual" + cant_empleados).setMask();
try{
setActionImputar('#imputar_sss' + cant_empleados);
setActionImputar('#imputar_rpp' + cant_empleados);
}catch(e){
// no hago nada
}}
function setActionImputar(selector){
$(selector).click(function(){
calcular_porcentaje($(this).val());
});}

You should use the live bind
function setActionImputar(selector){
$(selector).live('click', function(){
calcular_porcentaje($(this).val());
});
}

Use live to bind the event.
function setActionImputar(selector){
$(selector).live('click', function(){
calcular_porcentaje($(this).val());
});
}