<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>

$(window).on('load', change_label_css );

function change_label_css(){
    console.log("Changing CSS classes");
    if (document.getElementById("OT").textContent === "OT"){
        console.log(document.getElementById("OT").textContent);
        document.getElementById("OT").className = "badge badge-warning";
    }
    if(document.getElementById("RES").textContent === "RES"){
        console.log(document.getElementById("RES").textContent);
        document.getElementById("RES").className = "badge badge-success";
    }
    if(document.getElementById("DES").textContent === "DES"){
        console.log(document.getElementById("DES").textContent);
        document.getElementById("DES").className = "badge badge-light";
    }
    if(document.getElementById("CW").textContent === "CW"){
        console.log(document.getElementById("CW").textContent);
        document.getElementById("CW").className = "badge badge-info";
    }
    if(document.getElementById("Org").textContent === "Org"){
        console.log(document.getElementById("Org").textContent);
        document.getElementById("Org").className = "badge badge-primary";
    }
    if(document.getElementById("QT").textContent === "QT"){
        console.log(document.getElementById("QT").textContent);
        document.getElementById("QT").className = "badge badge-primary";
    }
    if(document.getElementById("URL").textContent === "URL"){
        console.log(document.getElementById("URL").textContent);
        document.getElementById("URL").className = "badge badge-secondary";
    }
    else if(document.getElementById("C").textContent === "C"){
        console.log(document.getElementById("C").textContent);
        document.getElementById("C").className = "badge badge-dark";
    }
    console.log("End of changing CSS classes");
}