JS: отображение содержимого onclick внутри цикла html

Я ищу предварительный просмотр, когда пользователь нажимает на глификон. Я пробовал кое-что, но до сих пор не борюсь с отображением картинки.

У меня очень простой HTML-код с Javascript внутри, например:

{% for document in publication.documents.all %}
    <table class = "table table-condensed">
        <tbody>
            <tr>
                <script>
                    document.getElementById('cover-icon{{ document.id }}').onclick=function(){
                    // Remove any element-specific value, falling back to stylesheets
                    document.getElementById('coverPDF{{ document.id }}').style.display='';
                    };
                </script>

                <td class = "col-md-1"><span class = "glyphicon glyphicon-blackboard cover-icon" id = "cover-icon{{ document.id }}"></span>
                    <div id = "coverPDF{{ document.id }}" style = "display: none;">
                        {% if document.format == 'pdf' %}

                            <script src = "https://mozilla.github.io/pdf.js/build/pdf.js"></script>

                              <script type = "text/javascript">
                              var document_upload = "{{ document.upload }}";
                              pdfjsLib.getDocument('http://localhost:8000/media/'+document_upload).then(function (pdf) {
                                pdf.getPage(1).then(function (page) {
                                    var scale = 0.30;
                                    var viewport = page.getViewport(scale);

                                    var canvas = document.getElementById('test{{ document.id }}');
                                    var context = canvas.getContext('2d');
                                    canvas.height = viewport.height;
                                    canvas.width = viewport.width;

                                    var renderContext = {
                                        canvasContext: context,
                                        viewport: viewport
                                    };
                                    page.render(renderContext);
                                });
                              });
                            </script>
                            <canvas id = "test{{ document.id }}" style = "border:1px solid #000000;"></canvas>
                        {% endif %}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
{% endfor %}

Я просматриваю список объектов документа, и для каждого объекта я хотел бы щелкнуть глификон, чтобы отобразить предварительный просмотр, предоставленный вторым сценарием JS внутри PDF.js. Этот второй работает нормально, но я не пытаюсь отобразить предварительный просмотр.

Не могли бы вы помочь мне ? Я новичок в JavaScript.

Код, который необходимо улучшить:

<script>
    document.getElementById('cover-icon{{ document.id }}').onclick=function(){
    // Remove any element-specific value, falling back to stylesheets
    document.getElementById('coverPDF{{ document.id }}').style.display='';
                    };
</script>