In my HTML template, I'm using jinja tags to dynamically create labels from a JSON object. The loop responsible for generating this content is detailed below.
<div class="card mb-0">
{% for turn in response %}
<div class="card-header collapsed" data-toggle="collapse" data-target="#collapse{{turn['turn_id']}}" href="#">
<a class="card-title"> {{turn['author_name']}} {{turn['date_time']}} </a>
</div>
<div id="collapse{{turn['turn_id']}}" class="card-body collapse in" >
<ul>
{% for sent in turn['list_of_sentences'] %}
<li>{{sent['text']}}</li>
{% for tag in sent['tags'] %}
<label><span class="badge" id="{{tag}}">{{ tag }}</span></label>
{% endfor %}
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
A JavaScript function I've written changes the CSS class based on the label's ID by assigning the label's textContent to the ID.
$(window).on('load', change_label_css );
function change_label_css(){
console.log("Changing CSS classes");
// Logic to change CSS classes based on label textContent
// Insert code for updating CSS classes here
console.log("End of changing CSS classes");
}
I've noticed that the current logic might not be ideal, especially with different and similar label IDs. Can anyone suggest a better way to iterate through each label and update the CSS class accordingly?