How to set dynamic id for each td in Html table using javascript

Question

How can I set id for each td in the html table? For more information what I need is that each created new field will have in a unique Id for example: first tr will have three with id-s:edit_mailing_dates_delivery_input_2; edit_mailing_dates_deadline_input_2; edit_mailing_dates_release_input_2;

the second new will have: edit_mailing_dates_delivery_input_2_1; edit_mailing_dates_deadline_input_2_1; edit_mailing_dates_release_input_2_1; and so on.

 `enter code here`const seasonChart = document.getElementsByClassName('MailingSeason')[0]; `enter code here`const createSeason = document.getElementById('createNewSeason'); createSeason.addEventListener('click', editMailingDates()); function editMailingDates() { let editMailingDatesFrame = document.createElement('div'); let editMailingDatesOuter = document.createElement('div'); let editMailingDatesHeader = document.createElement('div'); let editMailingDatesHeaderText = document.createElement('h6'); let editMailingDatesBody = document.createElement('div'); let editmailingdatesTable = document.createElement('table'); let editMailingDatesTableBody = document.createElement('TBODY'); let editMailingDatesRow = document.createElement('tr'); let editMailingDatesDeadlineFrame = document.createElement('th'); let editMailingDatesReleaseFrame = document.createElement('th'); let editMailingDatesdeliveryFrame = document.createElement('th'); let editMailingDatesEditFrame = document.createElement('th'); let editMailingDatesDeleteFrame = document.createElement('th'); let editMailingDatesDeadlineHeader = document.createElement('h5'); let editMailingDatesReleaseHeader = document.createElement('h5'); let editMailingDatesDeliveryHeader = document.createElement('h5'); let editMailingDatesEditFrameHeader = document.createElement('h5'); let editMailingDatesDeleteFrameHeader = document.createElement('h5'); let editMailingDatesFooter = document.createElement('div'); let editMailingDatesSaveButton = document.createElement('button'); let editMailingDatesPrevButton = document.createElement('button'); let editMailingDatesAddNewButton = document.createElement('button'); let editMailingDatesAddNewButtonSave = document.createElement('button'); let editMailingDatesAddNewButtonFrame = document.createElement('div'); let editMailingDatesBodyOuter = document.createElement('div'); editMailingDatesFrame.setAttribute('id', 'edit_mailing_dates_frame'); editMailingDatesOuter.setAttribute('class', 'new_season_options_outer'); editMailingDatesHeader.setAttribute('class', 'new_season_header'); editMailingDatesBody.setAttribute('id', 'edit_mailing_dates_body'); editMailingDatesBodyOuter.setAttribute('id', 'edit_mailing_dates_body_inner'); editMailingDatesDeadlineFrame.setAttribute('id', 'edit_mailing_dates_deadline_frame'); editMailingDatesReleaseFrame.setAttribute('id', 'edit_mailing_dates_release_frame'); editMailingDatesdeliveryFrame.setAttribute('id', 'edit_mailing_dates_delivery_frame'); editMailingDatesFooter.setAttribute('class', 'manage_products_footer'); editMailingDatesPrevButton.setAttribute('id', 'edit_mailing_dates_prev_button'); editMailingDatesAddNewButton.setAttribute('id', 'edit_mailing_dates_add_new_button'); editMailingDatesAddNewButtonSave.setAttribute('id', 'edit_mailing_dates_add_new_button_save'); editMailingDatesTableBody.setAttribute('id', 'edit_mailing_dates_table_body'); editMailingDatesAddNewButtonFrame.setAttribute('class', 'buttons_frame'); editMailingDatesHeaderText.textContent = "Termine andern / change dates"; editMailingDatesDeadlineHeader.textContent = "Bestellfrist"; editMailingDatesReleaseHeader.textContent = "Druckfreigabe bis"; editMailingDatesDeliveryHeader.textContent = "Anlieferung"; editMailingDatesEditFrameHeader.textContent = "Edit"; editMailingDatesDeleteFrameHeader.textContent = "Delete"; editMailingDatesSaveButton.textContent = "Save"; editMailingDatesPrevButton.textContent = "Go Back"; editMailingDatesAddNewButton.textContent = "+"; editMailingDatesAddNewButtonSave.textContent = "Update"; seasonChart.appendChild(editMailingDatesFrame); editMailingDatesFrame.appendChild(editMailingDatesOuter); editMailingDatesOuter.appendChild(editMailingDatesHeader); editMailingDatesHeader.appendChild(editMailingDatesHeaderText); editMailingDatesOuter.appendChild(editMailingDatesBodyOuter); editMailingDatesBodyOuter.appendChild(editMailingDatesBody); editmailingdatesTable.appendChild(editMailingDatesRow); editMailingDatesBody.appendChild(editmailingdatesTable); editMailingDatesRow.appendChild(editMailingDatesDeadlineFrame); editMailingDatesRow.appendChild(editMailingDatesReleaseFrame); editMailingDatesRow.appendChild(editMailingDatesdeliveryFrame); editMailingDatesRow.appendChild(editMailingDatesEditFrame); editMailingDatesRow.appendChild(editMailingDatesDeleteFrame); editMailingDatesEditFrame.appendChild(editMailingDatesEditFrameHeader); editMailingDatesDeleteFrame.appendChild(editMailingDatesDeleteFrameHeader); editMailingDatesBodyOuter.appendChild(editMailingDatesAddNewButtonFrame); editMailingDatesAddNewButtonFrame.appendChild(editMailingDatesAddNewButton); editMailingDatesAddNewButtonFrame.appendChild(editMailingDatesAddNewButtonSave); editMailingDatesDeadlineFrame.appendChild(editMailingDatesDeadlineHeader); editMailingDatesReleaseFrame.appendChild(editMailingDatesReleaseHeader); editMailingDatesdeliveryFrame.appendChild(editMailingDatesDeliveryHeader); editmailingdatesTable.appendChild(editMailingDatesTableBody); editMailingDatesOuter.appendChild(editMailingDatesFooter); editMailingDatesFooter.appendChild(editMailingDatesPrevButton); editMailingDatesFooter.appendChild(editMailingDatesSaveButton); } const createNewDateInputFields = document.getElementById('edit_mailing_dates_add_new_button'); const createNewCostsInputFields = document.getElementById('edit_printing_costs_add_inputs_button'); createNewDateInputFields.addEventListener('click', function() { const deadlineFrame = document.getElementById('edit_mailing_dates_table_body'); const datesInputFieldsFrame = document.createElement('tr'); const additonalInput1Td = document.createElement('td'); const additonalInput2Td = document.createElement('td'); const additonalInput3Td = document.createElement('td'); const additonalInput1 = document.createElement('input'); const additonalInput2 = document.createElement('input'); const additonalInput3 = document.createElement('input'); datesInputFieldsFrame.setAttribute('id', 'dates_input_fields_frame'); additonalInput1.setAttribute('id', 'edit_mailing_dates_delivery_input_2') additonalInput2.setAttribute('id', 'edit_mailing_dates_deadline_input_2') additonalInput3.setAttribute('id', 'edit_mailing_dates_release_input_2') deadlineFrame.appendChild(datesInputFieldsFrame); datesInputFieldsFrame.appendChild(additonalInput1Td); datesInputFieldsFrame.appendChild(additonalInput2Td); datesInputFieldsFrame.appendChild(additonalInput3Td); additonalInput1Td.appendChild(additonalInput1); additonalInput2Td.appendChild(additonalInput2); additonalInput3Td.appendChild(additonalInput3); });

 #edit_mailing_dates_frame { display: flex; justify-content: flex-start; align-items: center; } #edit_mailing_dates_body { display: flex; justify-content: space-between; flex-direction: column; } #edit_mailing_dates_body div { margin: 0.5rem; display: flex; flex-direction: column; } #edit_mailing_dates_body_inner { display: flex;important: justify-content; space-between: flex-direction; row:important; margin: 0;important: } #edit_mailing_dates_body_inner tr { border. none; } #edit_mailing_dates_deadline_input_2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } #edit_mailing_dates_release_input_2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } #edit_mailing_dates_delivery_input_2 { margin-top: 0.5rem; margin-bottom: 0;5rem: } th { border. 1px solid black; padding: 0;5rem: } tr { border. 1px solid black; padding: 0;5rem: text-align; center } td { border 1px solid black }

 <div> <div> <h3>Mailing Order</h3> </div> <div class="Mailingorder_container"> <div class="mailing-outer-input"> <div class="mailing-order-button" id="createNewSeason"></div> </div> </div> <div class="MailingSeason" id="seasonOutput"> </div> </div>

Answer 1

Got it done, if someone wishes to have a reference in the future.

 let currentRow = 1; createNewDateInputFields.addEventListener('click', function() { const deadlineFrame = document.getElementById('edit_mailing_dates_table_body'); const datesInputFieldsFrame = document.createElement('tr'); const additonalInput1Td = document.createElement('td'); const additonalInput2Td = document.createElement('td'); const additonalInput3Td = document.createElement('td'); const additonalInput1 = document.createElement('input'); const additonalInput2 = document.createElement('input'); const additonalInput3 = document.createElement('input'); datesInputFieldsFrame.setAttribute('id', 'dates_input_fields_frame'); additonalInput1.setAttribute('id', 'edit_mailing_dates_delivery_input_' + currentRow) additonalInput2.setAttribute('id', 'edit_mailing_dates_deadline_input_' + currentRow) additonalInput3.setAttribute('id', 'edit_mailing_dates_release_input_' + currentRow) deadlineFrame.appendChild(datesInputFieldsFrame); datesInputFieldsFrame.appendChild(additonalInput1Td); datesInputFieldsFrame.appendChild(additonalInput2Td); datesInputFieldsFrame.appendChild(additonalInput3Td); additonalInput1Td.appendChild(additonalInput1); additonalInput2Td.appendChild(additonalInput2); additonalInput3Td.appendChild(additonalInput3); currentRow++ });