<div class="content-section" style="padding: 0px"> <div class="card"> <div class="card-body"> <h5 class="card-title">Intent Ranking</h5> <hr> {% for intent, confidence in intents.items %} {{ intent }} <div class="progress mb-2"> <div class="progress-bar" role="progressbar" style="width: {{ confidence }}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ confidence }}%</div> </div> {% endfor %} </div> </div> <div class="card"> <div class="card-body"> <h5 class="card-title">Replies</h5> <hr> {% for key, data in replies.items %} <div class="card"> <h5 class="card-header">{{key}}</h5> <div class="card-body" style="padding: 1px"> <ul class="list-group list-group-item-action"> {% for reply in data %} <li class="list-group-item" style="font-size: 14px" ><p>{{ reply.reply }}</p></li> {% endfor %} </ul> </div> {% endfor %} </div> </div> </div> </div> <!-- Copy to Clipboard by Pabon Starts --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script> var len = $('.list-group-item').length; for(let i = 0 ; i < len ; i++){ // $('.list-group-item')[i].id = i+1; $('.list-group-item')[i].firstChild.id = i+1; // console.log($('.list-group-item')[i].firstChild.id); } $(document).on('click', '.list-group-item', (e) => { // console.log("CLicked"); var id = $(e.target).closest('.list-group-item').find('p')[0].id; // console.log(id); var text = document.getElementById(id).textContent; $.toast({ heading: 'Copied to Clipboard!', text: text, icon: 'success', position: 'top-right', stack: false }); // console.log(document.getElementById(id).textContent); var dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); }) </script> <!-- Copy to Clipboard by Pabon Ends -->