Как связать кнопки с новыми объектами (вложенность объектов) в Javascript

Question

Так что мне нужно что-то похожее на кнопку переключения передач Facebook Messenger, которая видна только тогда, когда окно беседы завис или активно в данный момент (просто чтобы дать изображение этим словам), но как я могу связать кнопку с этим объектом? Вложение объектов действительно меня смущает. Это то, что сейчас выглядит сейчас.

table_data { 

    item_1: { fruits: [ {}, ..., {} ]}, 
    item_2: { fruits: [ {}, ..., {} ]}, 
    ... 
    ... 
    item_n: { fruits: [ {}, ..., {} ]}, 
} 

Каждый item является div, который имеет 3 кнопки:

1. Удалить - удаляет элемент и все содержимое
2. Параметры - открывает опции поповер меню
3. Expand - расширяет ток item, чтобы показать fruits массив объектов

Пользователь вводит новый item, а затем имеет возможность добавлять объекты в массив fruits.

document.getElementById("save").addEventListener("click", function() { 
    table_data[newItem] = { fruits:[] }; 
    appendHTML(newItem); 
    // helper function that appends HTML 
} 

Таким образом, под вариантами пользователь может «Добавить фрукты». Как я могу связать, что «Добавить фрукты» в правильный элемент, так как кнопка «Параметры» просто добавлена ​​в HTML.

Если это помогает, вспомогательная функция выглядит так.

function appendHTML(item) { 
    $("#list").append('<li class="enter"><div class="listContent"><a href="#" class="close"></a><span class="itemName">'+item+'</span></a><a href="#" id="expand"></a><a href="#" id="gear"></a></div></li>'); 

}

Если кто-нибудь случается, нужен ответ на это в будущем ...

$(document).on('click', "#list > li > .listContent > .gear", function() { 
    $(this).next().slideToggle(); 
}); 

Answer 1

Это дубликат this question. Там вы найдете несколько ответов. Я думаю, что лучше всего, вероятно, сохранить элемент в var, а затем вы можете легко настроить его на все, что захотите, после добавления его