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>

JavaScript foreach statement to append entire records

I have following JavaScript code that used to append the entire records to MySQL table.
$('#request_table').append('<tr>' +
'<td ><span id="product" >' + jData.data[0].item_name + '</span>' +
'<input type="hidden" id="item_id[]" name="item_id[]" value="' + jData.data[0].item_id
+ '">' +
'</td>' +
'<td class="text-center">' + jData.data[0].qty + '</td>' +
'<td class="text-center"><input class="form-control text-center rquantity" data-qty-bal="' + jData.data[0].qty + '" autofocus required type="number" step="any" id="qty[]" name="qty[]" ></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus required type="number" step="any" id="sales_price[]" name="sales_price[]" value="' + jData.data[0].unit_price + '"></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus type="number" step="any" id="discount_price[]" name="discount_price[]" ></td>' +
'<td class="text-center" ><i class="fa fa-remove remove" style="cursor: pointer"></i>
</td>' +
'</tr>');
But the above function only append the first record to the table. How to change the code with foreach statement to append the entire records.I used Codeigniter framework.
Can anyone help me ?

You can use forEach like this:
jData.data.forEach(data => {
$('#request_table').append('<tr>' +
'<td ><span id="product" >' + data.item_name + '</span>' +
'<input type="hidden" id="item_id[]" name="item_id[]" value="' + data.item_id
+ '">' +
'</td>' +
'<td class="text-center">' + data.qty + '</td>' +
'<td class="text-center"><input class="form-control text-center rquantity" data-qty-bal="' + data.qty + '" autofocus required type="number" step="any" id="qty[]" name="qty[]" ></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus required type="number" step="any" id="sales_price[]" name="sales_price[]" value="' + data.unit_price + '"></td>' +
'<td class="text-center"><input class="form-control text-right" autofocus type="number" step="any" id="discount_price[]" name="discount_price[]" ></td>' +
'<td class="text-center" ><i class="fa fa-remove remove" style="cursor: pointer"></i>
</td>' +
'</tr>');
})

You accesing only to jData.data[0].* (just the first index element)
you need an iteration eg: based on a index i and then accessing by
jData.data[i].qty ,
jData.data[i].unit_price,
....

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 */
});