After trying several methods, I finally found a way to change the icon on a button that was generated using a for loop on page load. Below is my element:
{% for i in data %}
<div class="accordion">
<div style="margin-left: -10px;">
<a href="#collapse{{ i }}", class="btn", role="button", data-bs-toggle="collapse" id="btn-collapse_{{ i }}">
<i class="material-icons" style="vertical-align: middle;">expand_more</i>
<label style="vertical-align: middle;">{{ i }}</label>
</a>
</div>
</div>
{% endfor %}
Below is the function I used to change the icon:
<script>
$(document).ready(function(){
$('#btn-collapse_{{ i }}').on('click', function () {
var thisElement = $(this);
var anchorElement = thisElement.find("i");
if(anchorElement.text() === "expand_less"){
anchorElement.text('expand_more');
} else {
thisElement.find("i").text("expand_less");
}
});
});
</script>
I also tried changing the color in a different scenario. Here is the element:
<tbody>
{% for i in data %}
<tr style="vertical-align: middle;">
<td><a href="#">{{ i }}</a></td>
<td>{{ i.data1 }}</td>
<td><a href="#">{{ i.data1 }}</a></td>
<td style="text-align: center;">
<button class="btn", id="btn-{{ i.data2 }}">
<i class="far fa-check-circle"></i>
</button>
</td>
<td style="text-align: center;">
<button class="btn", id="btn-{{ i.data3 }">
<i class="far fa-check-circle"></i>
</button>
</td>
</tr>
{% endfor %}
</tbody>
Here is the function used for this:
<script>
$(document).ready(function(){
var data_button = document.getElementById("btn-{{ i.data2 }}");
if({{ i.data2 }} == 'None'){
data_button.style.color = "#858796";
}
else {
data_button.style.color = "#1cc88a";
}
});
</script>
The data queried in the second scenario can either be 'None' or a date.