How to select objects from one array to become object in a separate array

Question

I have a list of items to put in a box and i have an empty box, the list of items and the empty box are two different arrays, the items are objects in the array put by user inputs. Beside every item added is an "add" button appended to it which should then copy that selected object into the empty box array. How do i achieve this?

i have tried to append the parentNode of the add button and push to the new array but it just pushed the "Li" element instead of the object itself

<div>
    <input id="userinput" type="number" placeholder="Enter Capacity">
    <button id="enter">Enter</button>
</div><br>
<div>
    <p>Items Information:</p>
    <input id="itemName" type="text" placeholder="enter item name">
    <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
    <input id="itemValue" type="number" placeholder="enter item value">
    <button onclick="addListAfterClick()" id="value">Enter</button>
</div>
    <ul id="list">LIST OF 20 ITEMS TO CHOOSE FROM
    </ul>
    <ul id="knap"> LIST OF ITEMS IN KNAPSACK
    </ul>
<div>

let addValues = () =>{
         inputs = {
            name : input2.value,
            weight : parseFloat(input3.value),
            value : parseInt(input4.value)
        }

        arr_items.push(inputs);
        console.log(arr_items);
createListElement();
}
let createListElement = () => {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input2.value));
    ul.appendChild(li);

    let btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Add"));
    li.appendChild(btn);
    btn.onclick = addTo;

}
function addTo(){
    var li2 = document.createElement("li");
    li2.appendChild(document.createTextNode(input2.value));
    ul2.appendChild(li2);
    knap.push(this.parentNode);
    console.log(knap);
}

I expect any object clicked to be copied to the "knap" array

Answer 1

First of all, your question was confusing, your code was not so clear as you didn't define most of the variables and function you called up in the code, I found it difficult understanding what you meant.

If you want to do this, you have to actually keep track of all the list items you are creating, to do this I created a listCount variable that increments whenever the "Add" button is clicked, I set the id of the "Add" button to the current value of the listCount variable. So when "Add" button is clicked, we retrieve id and use it to select which array to push to "knap" from the "arr_list". Here is the modification of your code:

arr_items = new Array();
    knap = new Array();
        let input2 = document.getElementById("itemName");
        let input3 = document.getElementById("itemWeight");
        let input4 = document.getElementById("itemValue");
        let ul = document.getElementById("list");
        let ul2 = document.getElementById("knap")
        let listCount = 0; // create a listCount variable to track the list items created
    let addValues = () =>{
        
         inputs = {
            name : input2.value,
            weight : parseFloat(input3.value),
            value : parseInt(input4.value)
        }

        arr_items.push(inputs);
        console.log(arr_items);
createListElement();
}
let createListElement = () => {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input2.value));
    ul.appendChild(li);

    let btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Add"));
    li.appendChild(btn);
    btn.id = listCount; // set the value of listCount variable as the id of the button
    btn.onclick = addTo;
    listCount++; // increment the list count variable

}
function addTo(){
    var li2 = document.createElement("li");
    var id = parseInt(this.id); // retrieve the id of the button
    li2.appendChild(document.createTextNode(input2.value));
    ul2.appendChild(li2);
    knap.push(arr_items[id]); //use the id of the button to select array to push to knap from the array item
    console.log(knap);
}

<div>
    <input id="userinput" type="number" placeholder="Enter Capacity">
    <button id="enter">Enter</button>
</div><br>
<div>
    <p>Items Information:</p>
    <input id="itemName" type="text" placeholder="enter item name">
    <input id="itemWeight" type="number" placeholder="enter item weight(kg)">
    <input id="itemValue" type="number" placeholder="enter item value">
    <button onclick="addValues()" id="value">Enter</button>
</div>
    <ul id="list">LIST OF 20 ITEMS TO CHOOSE FROM
    </ul>
    <ul id="knap"> LIST OF ITEMS IN KNAPSACK
    </ul>
<div>

I believe that should work as you expected