Как запустить javascript через цикл for?

Я создал поле поиска и выделения для объектов моей модели. Страница принимает текстовый ввод и фильтрует объекты как Documents.objects.filter(content)

Я использую функции read more и highlight, чтобы выделить введенное слово и показать часть длинного содержимого. Но я не могу нажать на некоторые read-mores в строке. Например, я не могу нажать на 1-ю и 3-ю строку (возвращается javascript:void(0), но нет никакого действия), но я могу нажать на другие строки.

Как я могу это исправить?

<div id="highlights" >
  <div class="row">
    <div class="col-md-12" >
       <div class="box">
         <p class="countParawords-{{ forloop.counter0 }}" id="paragraph-{{ forloop.counter0 }}">
             {{ document.content }}
         </p>
       </div>
     </div>
     <input id="typed-text-{{ forloop.counter0 }}" type="text" class="hidden_input" placeholder="Type text" value="{{ key_word }}">
   </div>
</div>

<script>
    

{% for doc in documents %}
        var opar = document.getElementById('paragraph-{{ forloop.counter0 }}').innerHTML;
        $(document).ready(function() {
            var maxLength = 300;
            var moretxt = "...Read More";
            var lesstxt = "...Read Less";
            $(".countParawords-{{ forloop.counter0 }}").each(function() {
                if(opar) {
                    var paragraph = (document.getElementById('paragraph-{{ forloop.counter0 }}'));
                    var search = document.getElementById('typed-text-{{ forloop.counter0 }}').value;
                    search = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    var re = new RegExp(search, 'g');
                    if (search.length > 0)
                        paragraph.innerHTML = opar.replace(re, `<span style="background: #cead00">$&</span>`);
                }
                else{
                    console.log("No data")
                }
                var myStr = paragraph.innerHTML
                if ($.trim(myStr).length > maxLength) {
                    var newStr = myStr.substring(0, maxLength);
                    var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
                    $(this).empty().html(newStr);
                    $(this).append('<span class="more-text">' + removedStr + '</span>');
                    $(this).append(' <a href="javascript:void(0);" class="read-more more">' + moretxt + '</a>');
                }
            });
            $(".read-more").click(function() {
                if($(this).hasClass("more")){
                    $(this).removeClass("more");
                    $(this).text(lesstxt);
                    $(this).siblings(".more-text").show();
                }
                else {
                    $(this).addClass("more");
                    $(this).text(moretxt);
                    $(this).siblings(".more-text").hide();
                }

            });

        });
    {% endfor %}
</script>

Вернуться на верх