Appending HTML Block to Selector with Variables

Question

We have a fairly simple function called alert which basically creates an alert card (HTML element) anytime it is triggered. For reference we are using Eel to pass variables from Python and run this in a chrome wrapper.

<script type="text/javascript">

    eel.expose(alert);

    function alert(serial, time_key, card_color, screen_msg, ping) {
        //clone card_template for each new alert
        var clone = $("#card_template").clone();
        clone.attr("id", serial);
        clone.find("#message-card").attr("id", "message-card-" + serial + "-" + time_key);
        clone.find("#python-data").attr("id", "python-data-" + serial + "-" + time_key);
        //append clone on the end
        $("#message-zone").prepend(clone);

        document.getElementById("message-card-" + serial + "-" + time_key).classList.remove('bg-info');
        document.getElementById("message-card-" + serial + "-" + time_key).className += card_color;
        document.getElementById("python-data-" + serial + "-" + time_key).innerHTML = screen_msg;

        var button_template = '<button type="button" class="btn btn-sm btn-danger">Clear</button>';
        var selector_id = 'python-data-' + serial + '-' + time_key;
        // $('#python-data-'+ serial + '-' + time_key).append(button_template);
        $('#'+ selector_id).append(button_template);
        $('#python-data').append(button_template);

        if (ping === true)
            document.getElementById('alert').play();
    }

</script>

It clones and alters this element based on the type of alert that is received.

       <div class="row justify-content-center" id="card_template">
            <div class="col-md-8">
                <div class="card bg-info" id="message-card">
                    <div class='card-body' id="python-data">
                        No messages
                    </div>
                </div>
            </div>
        </div>

So this is where we are losing it. We want to append a HTML block to the cards after they are cloned and given unique ids. We have created a variable button_template that contains that code block. We can insert this code block easily into an element with a hardcoded id.

For example:

$('#python-data').append(button_template);

Will append the code block to the #python-data div in the original (clone source) card.

But we can't seem to get it to work when our selector is assembled from variables (necessary to address the cloned alert cards with unique ids).

Neither:

var selector_id = 'python-data-' + serial + '-' + time_key;
$('#'+ selector_id).append(button_template);

or

$('#'+ 'python-data-' + serial + '-' + time_key).append(button_template);

Works on the newly cloned cards.

TLDR Everything else on this function works. It clones our starting element, gives it, and its children, a unique id (assembled from variable), removes a class, adds a class and writes a message to the innermost div. This all works. All we need help with is appending a HTML block to a div with a unique, variable-based id.

Answer 1

This is the jsfiddle link ( https://jsfiddle.net/abhishekraj007/w3m3r8oL/12/ ) I created to understand your code. Here I hardcoded unique ids while passing to function and its working. Something like this:

aalert("serial1", "a", "blue", "message", true)
aalert("serial2", "b", "blue", "message", true)

I've changed function name because alert is reserved Javascript function. Please check and let me know if this not what you want.

Answer 2

I have created a codepen from your code and its working fine there. The issue is must be somewhere else in your code.

My code.

JS

var serial = "123";
var time_key = "67868678";
var card_color = "bg-warning";
var screen_msg = "This is new message";
var clone = $("#card_template").clone();
        clone.attr("id", serial);
        clone.find("#message-card").attr("id", "message-card-" + serial + "-" + time_key);
        clone.find("#python-data").attr("id", "python-data-" + serial + "-" + time_key);
        //append clone on the end
        $("#message-zone").prepend(clone);

document.getElementById("message-card-" + serial + "-" + time_key).classList.remove('bg-info');
 document.getElementById("message-card-" + serial + "-" + time_key).className += " "+card_color;
        document.getElementById("python-data-" + serial + "-" + time_key).innerHTML = screen_msg;
var button_template = '<button type="button" class="btn btn-sm btn-danger">Clear</button>';
var selector_id = 'python-data-' + serial + '-' + time_key;
$('#'+ selector_id).append(button_template);
 $('#python-data').append(button_template);

HTML

 <div class="row justify-content-center" id="card_template">
            <div class="col-md-8">
                <div class="card bg-info" id="message-card">
                    <div class='card-body' id="python-data">
                        No messages
                    </div>
                </div>
            </div>
        </div>
<div id="message-zone"></div>

Here is a codepen .

I think this issue is related to duplicate IDs. Can you please check the unique IDs you are generating are really unique?