We Keep Coding

How to correctly send data to the server from the table?

I apologize for possible grammatical errors, this text was translated through Google translate.
I'm not very good at programming yet, I'm learning right away in practice. Now I'm making a Django web application for warehouse management.
I have a select with a list of products that is loaded via api, and when the select is selected, a row with the product is added to the table
success: function (res) {
let invoiceRow = document.querySelector(".invoice-add-table table tbody tr.add-elements").insertAdjacentHTML('beforebegin', '<tr class="invoice-row">' +
'<td align="right" class="fixed">'+ res.articul +'</td>' +
'<td class="name" align="left"><span title="'+ res.name +'" style="text-decoration: underline; cursor: pointer;">'+ res.name +'</span></td>' +
'<td align="right" class="fixed"><input name="quantity" value="1" class="ta-right fixed" type="text"></td>' +
'<td align="right" class="fixed"><input name="last_buy_price" value="'+ res.last_buy_price +'" class="ta-right fixed" type="text"></td>' +
'<td align="right" class="fixed"><input name="summ" value="" class="ta-right fixed" type="text"></td>' +
'<td align="right" class="fixed"><input name="sell_price" value="'+ res.sell_price +'" class="ta-right fixed" type="text"></td>' +
'<td align="right"><div style="display: flex;" class="edit-tool-table"><span class="iconify" data-icon="bx:trash" style="color: white;" data-width="20"></span></div></td>'+
'</tr>');
$(".add-items-select")[0].selectize.clear()
Question:
How do I identify each row to send it to the server, as well as the data in the inputs that are responsible for the quantity and price? There can be as many lines as you want, I don't understand how to get them on the server
Thanks

How to get appended accodian in JavaScript

I get companies from firebase database and append it to html using javascript. This is the code.
function loadcompanies() {
var leadsRef = database.ref('companies');
leadsRef.on('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function(childSnapshot) {
var childData = childSnapshot.val();
content += '<tr class="header" class="clickable">';
//content += '<tr class="header">';
content += '<td style="width: 55px; color: #42957F">'+childData.rooms+'</td>';
content += '<td id="companyName" onclick="getrooms(this)" data-toggle="collapse" data-target="#accordion1" style="width: 102px; font-weight: bold">'+childData.company+'</td>';
content += '<td style="width: 60px;">'+childData.code+'</td>';
content += '<td><i class="fas fa-plus-circle plus"></i>Add Rooms';
content += '</td>';
content += '</tr>';
//companyName.innerHTML += '<div>'+childData.company+'</div>';
//document.getElementById("companyName").innerHTML = childData.company;
//alert(childData.company);
console.log(childData.rooms.length);
});
$('#abctable').append(content);
}
});
}
When I load the page and click one of the companies, I get the name of that company using the id #companyform in javascript and by using that id I again use the firebase and get its rooms. This is the code.
function getrooms(x) {
name = $(x).closest('tr').find('#companyName').text();
//var rowIndex = $(x).closest('tr').index();
var leadsRef= database.ref('companies/' + name + '/nrooms');
leadsRef.on('value', function(snapshot) {
if (snapshot.exists()) {
var content= '';
snapshot.forEach(function(Snapshot){
var childData= Snapshot.val();
var key = Snapshot.key;
content+= '<tr style="background-color: #F2F2F2; color: #42957F">';
content+= '<td style="background-color: none" id="accordion1" class="collapse"></td>';
content+= '<td id="accordion1" class="collapse"></td>';
content+= '<td id="accordion1" class="collapse"></td>';
content+= '<td style="width: 170px;" id="accordion1" class="collapse">'+key+'</td>';
content+= ' <td style="width: 250px; font-size: 13px;" id="accordion1" class="collapse">'+childData.roombeacon.uuid+'</td>';
content+= '<td style="width: 90px;" id="accordion1" class="collapse">'+childData.roombeacon.major+'</td>';
content+= ' <td style="width: 100px;" id="accordion1" class="collapse">'+childData.roombeacon.minor+'</td>';
content+= ' <td style="width: 110px;" id="accordion1" class="collapse">'+childData.roombeacon.enter+'</td>';
content+= ' <td style="width: 85px;" id="accordion1" class="collapse">'+childData.roombeacon.docking+'</td>';
content+= '<td style="width: 45px;" id="accordion1" class="collapse">'+childData.roombeacon.tx+'</td>';
content+= ' <td style="font-size: 13px; width: 195px; margin-left:50px;" id="accordion1" class="collapse">'+childData.dockbeacon.uuid+'</td>';
content+= ' <td style=" width: 80px;" id="accordion1" class="collapse">'+childData.dockbeacon.major+'</td>';
content+= ' <td style="width: 110px;" id="accordion1" class="collapse">'+childData.dockbeacon.minor+'</td>';
content+= ' <td style="width: 110px;" id="accordion1" class="collapse">'+childData.dockbeacon.tx+'</td>';
content+= ' </tr>';
console.log(childData.roombeacon.length);
console.log(childData);
});
$('#abctable').append(content);
}
});
// alert(name);
}
The problem is that this program I have written is not correctly working, like every room is not loading after the company. It is printing at the end of all the companies listen, and when I click the company multiple times it does not close the according and keep on printing the value from database.
This is what it gives me when i click Devstop, It should print after Devstop row. and on clicking Devstop multiple times it is printing the rows multiple times,

I guess the root cause is the duplicated id property shared across your HTML.
Take following as an example, every element in your loop shares the same id property, which leads to your undesired result.
forEach{
<td id="companyName">
}
forEach{
<td id="accordion1">
}
Above is nested in a forEach loop, so elements sharing the same id are produced.
HTML doesn't allow more than one element assigned with the same id.
Your code has too many errors like this.
I hope following code sample will enlighten you a little bit and you can differentiate every id by appending the current loop index to it.
var content = "";
snapshot.forEach(function(childSnapshot, index) {
content += '<td id="companyName' + index + '">';
});

append table to another div | JS jQuery

JSFiddle Here
I have 2 div in HTML
The first div for the folder column.
<div class="columnFolder-container"></div>
The second div for the column table. with class ._zTable
<div class = "_zTable"> </ div>
Then in javascript, I have 1 variable (var div =)
which includes 1 div (class="folder") inside the div contains the table with id="exTable".
I want the table to be moved into ._zTable and not in the div class .folder.
Because I want the div .folder in the column folder.
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span' +
'<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>' +
'</div>';

You will need to split your variable into two.
I notice your table is inside your .folder div. I presume that shouldn't be the case.
The variables are then:
var div = '<div class="folder"><span class="fname">Folder : '+name+'</span></div>'
var table = '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
'<thead>' +
'<tr>' +
'<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
'<th>Name</th>' +
'<th>Type</th>' +
'<th>Size</th>' +
'<th>Date Created</th>' +
'</tr>' +
'</thead>' +
'</table>';
Then the code to put these in the right divs is:
document.getElementsByClassName("columnFolder-container")[0].innerHTML=div;
document.getElementsByClassName("_zTable")[0].innerHTML=table;
or with jquery:
$('.columnFolder-container').first().html(div);
$('._zTable').first().html(table);

Using Jquery :
`$(document).ready(function() {
$('#exTable').appendTo('.columnFolder-container');
});`

Adding id to a specific button using jQuery

I'm new to jQuery and JS. So I have this task to create tabel row using a dialog form. On every row the last cell must contain a button. My question is how can I add id for this specific button. I've tried selecting the button and adding .attr('id','delete'), but this changes the id of the button that opens the dialog.
So how can I add id only to the newly created button?
< script type = "text/javascript" >
function validateForm(form) {
var errors = [];
$(form.elements).each(function() {
var $this = $(this);
if (!$this.val()) {
var msg = $this.prev().html() + ' е задължително поле';
errors.push(msg);
}
});
return errors;
}
function saveForm(form) {
var nextNumber = $('table tr').length;
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button>' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
$('table').append(rowTpl);
}
$(function() {
$('#add-btn').button({
icons: {
primary: 'ui-icon-circle-plus'
}
}).on('click', function() {
$('#form-container').dialog('open')
});
$('#form-container').dialog({
autoOpen: false,
modal: true,
buttons: [{
text: 'Save',
click: function() {
var form = $(this).find('form').get(0);
var errors = validateForm(form);
if (errors.length) {
return alert(errors.join("\n"));
}
saveForm(form);
form.reset();
$(this).dialog('close');
}
}, {
text: 'Close',
click: function() {
$(this).find('form').get(0).reset();
$(this).dialog('close');
}
}]
});
})
$('#delete').button({});
$("#delete").click(function() {
$(this).parents('tr').first().remove();
});
< /script>
<style type="text/css"> table {
border-collapse: collapse;
}
th {
padding: 0.2em;
}
td {
margin: 0.2em;
padding: 0.2em;
text-align: center;
border: 1px solid grey;
}
.ui-widget-header,
.ui-widget-content {
padding: 0.8em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
</style>
<div id="container" class="ui-widget">
<div class="ui-widget-header ui-helper-clearfix">
<h3 class="float-left">ALL CARS</h3>
<button class="float-right" id="add-btn">
<span>Add New Address</span>
</button>
</div>
<div class="ui-widget-content">
<table width="100%">
<tr>
<th>#</th>
<th>Марка</th>
<th>Модел</th>
<th>Година</th>
<th>Километри</th>
<th>Премахни</th>
</tr>
<tr>
<td>1</td>
<td>BMW</td>
<td>i8</td>
<td>2015</td>
<td>10 000</td>
<td>
<button class="float-center" id="delete">
<span>Delete</span>
</button>
</td>
</tr>
</table>
</div>
<div id="form-container" title="Add new car">
<form action="">
<div>
<label for="brand">Марка</label>
<input type="text" id="brand" />
</div>
<div>
<label for="model">Модел</label>
<input type="text" id="model" />
</div>
<div>
<label for="year">Година</label>
<input type="number" id="year" />
</div>
<div>
<label for="kms">Километри</label>
<input type="number" id="kms" />
</div>
</form>
</div>
</div>
Thank you!

Add id to the button in your rowTpl variable like following.
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button id="delete'+nextNumber+'">' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
It will add button id as delete1, delete2, delete3,......

ids are singular so you should not be setting the same id on multiple elements. Second the onclick you are adding with that id is not going to be attached to the button that you create after that code runs. Just like if the phone rings and you are not there, you will not answer it.
Use event delegation to detect what one was clicked and you can use closest to get access to the row the button resides in.
//attach the click handler to the table and listen for a click on a button
$("table").on("click", "button", function () {
var button = $(this); //The button that was clicked
var row = button.closest("tr"); //The row the button is in.
row.remove(); //delete the row
});

id must be unique in the entire document, so setting id to "delete" for all of these buttons is incorrect. You can set a class. When you are creating it, you could just create it as <button class='delete'>, and then use $(".delete") to find all buttons.
You can also set the action directly in the code:
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button onclick="$(this).closest(\'tr\').remove();">' + '<span>' + 'Delete' + '</span>' + '</button>' +
'</td>' +
'</tr>';

positioning button in table

I'm dynamically creating a table row, as below, with a "Delete" button inside the last table cell, but when rendered, the Delete button doesn't land neatly in the table where it should be. Any ideas?
strAppend = '<tr>' +
'<td id="SUBJ_'+idNum+'" class="td-SUBJ_'+idNum+'"><input type="text" class="SUBJ" value="Elective" name="SUBJ"> </td>' +
'<td id="REQUIRED_'+idNum+'" class="td-REQUIRED"><input type="checkbox" value="1" maxlength="40"> </td>' +
'<td id="DELETED_'+idNum+'" class="td-DELETED"><button id="DELETE_"'+idNum+'" class="DELETE">Del</button></td>' +
'<td><input value="Test"></td>' +
'</tr>'
//Add row
$j("tbody > tr:last").prev().before(strAppend);

You are closing your quote too early
'<td id="DELETED_'+idNum+'" class="td-DELETED"><button id="DELETE_"'+idNum+'" class="DELETE">Del</button></td>' +
Will result in something like this
<td id="DELETED_5" class="td-DELETED"><button id="DELETE_"5" class="DELETE">Del</button></td>
Get rid of the extra quote in the button definition
'<td id="DELETED_'+idNum+'" class="td-DELETED"><button id="DELETE_'+idNum+'" class="DELETE">Del</button></td>' +