Select dynamically created elements in javascript

Question

I'm developing a simple project using electronjs, my goal is to discover connected to my local network using multicast, load them into my electron window and selecting one of them (by IP). The multicast part is pretty much done and the devices are loaded correctly using handlebars template (my first time using handlebars and DOM manipulation).

My problem is that I don't know how to select the IP (because what I really need is to link an angular project to that IP) from the current template I'm using. The SELECT AS SOURCE NODE button should maybe execute a function to which I can pass the retrieved IP from the label, or any other way to retrieve the IP on that template instance.

html template

<!--Where the devices will be rendered-->
  <div class="row" id="nodes">

  </div>

   <script id="entry-template" type="text/x-handlebars-template">
                <div class="col-xs-4 p-2">
                    <div class="card text-center">
                        <div class="card-header">
                            <h5 class="card-title">Node: {{counter}}</h5>
                        </div>
                        <div class="card-body">
                            <label id="labelIP">
                         {{nodo}}</label>
                            <hr>
                        </div>
                        <div class="card-footer">
                            <button id="btnSelect" class="btn btn-danger btn-sm">
                            SELECT AS SOURCE NODE
                          </button>
                        </div>
                    </div>
                </div>
            </script>

ipNodes is where each device ip is pushed when the multicast message is received.

NodeJS function that adds each device/node received by multicast

var addNode = function() {

    /* Using a simple list I am able to retrieve the Ip

     var listitem = document.createElement('li');
     listitem.className = 'dynamic-link';
     listitem.innerHTML = ipNodes.slice(-1).pop();
     listitem.onclick = dynamicEvent;
     list.appendChild(listitem);*/

    const nodes = document.querySelector('#nodes');
    var source = document.getElementById("entry-template").innerHTML;
    var template = handlebars.compile(source);

    var context = { nodo: ipNodes.slice(-1).pop(), counter: counterList };
    nodes.innerHTML += template(context);

    counterList++;

}

The thing is that I want to retrieve each dynamically created IP from each label. Being used to angular directives and two-way data binding I don't even know if this is a feasible approach.

Visual representation for clarification:

Answer 1

Please try this out. I'm using jQuery in my answer. I didn't check if it's working or not.

$("#nodes").on("click",".btn-danger", function() {
console.log("IP selected = ", $(this).closest(".card").find("#labelIP").text());
});

If you want to add an event to a dynamically added element, you can use jQuery's .on() function.

Answer 2

Decided to change the approach to something simpler such as a select.

<div class="selectArea">

            <form id="myForm">
                <div class="form-group">
                    <select class="form-control" id="selectNumber">
                        <option>Choose a node</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="nodesArea" id="nodes">
            <label id="labelListen"></label>


        </div>
    </div>

    <script id="entry-template" type="text/x-handlebars-template">
        <div class="col-xs-4 p-2">
            <div class="card text-center">
                <div class="card-header">
                    <h5 class="card-title">Node: {{counter}}</h5>
                </div>
                <div class="card-body">
                    <label id="labelIP">
                 {{nodo}}</label>
                    <hr>
                </div>
            </div>
        </div>
    </script>

var select = document.querySelector('#selectNumber');
select.addEventListener('change', (event) => {

    console.log(event.target.value);
    /*const result = document.querySelector('.result');
    result.textContent = `You like ${event.target.value}`;*/
});


var addNode = async function() {

    const nodes = document.querySelector('#nodes');

    var opt = ipNodes.slice(-1).pop();
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);




    var source = document.getElementById("entry-template").innerHTML;

    var template = handlebars.compile(source);

    var context = { nodo: opt, counter: counterList };

    nodes.innerHTML += template(context);

    counterList++;

}