In my application, I have implemented a feature where clicking on the "Add New Item" button adds rows dynamically using Javascript. Each input field in the dynamically added rows has a unique ID, and this functionality is working smoothly.
When a number from the left table is clicked, it populates dynamically in the corresponding row on the left side. Similarly, when a number from the right table is clicked, it populates in the single input field on the right side (after the plus icon).
Furthermore, hovering over the 1st row causes the background color to change to green, including the matching element on the left table, which functions correctly.
I am currently trying to enhance the logic as follows: a.) Upon clicking the "Add New Item" button, a new row should be added following the format of the 1st row. b.) After selecting any number from the two tables (right and left), their values populate in the rows accordingly. When hovering over these values in the rows, their background colors should immediately change to match the source table's values...
Note: Essentially, I aim to replicate the behavior of the 1st row across all dynamically added rows after the button click event.
For reference, here is the JsFiddle link: Js Fiddle
If you could lend your assistance with this task, I would greatly appreciate it.
Below is the commented Javascript code outlining the steps involved:
// Add row input fields dynamically on button click
// Starting number of inputs
let count = 5;
// Wrapper
const wrapper = document.querySelector("#wrapper");
document.querySelector("#btn").addEventListener("click", () => {
const container = document.createElement("div");
for (let i = 0; i < 5; i++) {
// Increment the count to ensure uniqueness
count++;
// Create a new `<input>` element
const input = document.createElement("input");
input.type = "text";
input.name = count;
input.size = "4";
input.id = `inp${count}`;
container.appendChild(input);
// Optional: add whitespace after each child
container.append(document.createTextNode(" "));
}
wrapper.appendChild(container);
});
// END creating rows dynamically
let currentInput = 1;
let bonusInput = 1;
// Left table click event
$("#table1 td").on("click", function(event) {
// Get the number associated with the click
let num = $(this).text();
// Populate it in the appropriate input field
$("#inp" + currentInput++).attr("value", num);
});
// Right table click event
$("#table2").on("click", function(event) {
// Get the number associated with the click
let bon = event.target.textContent;
// Populate it in the appropriate input field
$("#bonus" + bonusInput++).attr("value", bon);
});
// Manipulate background colors of rows based on hover and selected tables
$("input").hover(
function(event) {
let parent = $(this).parent();
$(parent.children()).each(function(index, element) {
let num = $(element).val();
if (num) {
// Change input color on hover
$(this).css("backgroundColor", "green");
// Change left table bgcolor on hover
$("#table1 td").each(function() {
if ($(this).text() === num) $(this).css("backgroundColor", "green");
});
}
});
},
function(event) {
// Reset input color on hover out
let parent = $(this).parent();
$(parent.children()).each(function(index, element) {
$(element).css("backgroundColor", "white");
});
// Reset left table bgcolor on hover out
$("#table1 td").each(function() {
$(this).css("backgroundColor", "orange");
});
}
);