Как настроить чтение текста для всех изображений с помощью кода Скрыть / Читать больше?

Question

У меня есть страница просмотра, которая работает хорошо, за исключением раздела readmore / hide и некоторого позиционирования текста. Это код:

{{extend 'layout.html'}}
<style>
    #example {
    background: white;
    height: 0px;
    overflow: hidden;
    transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */
    }


    a.showLink, a.hideLink {
        text-decoration: none;
        background: transparent url('down.gif') no-repeat left;
    }


    a.hideLink {
        background: transparent url('up.gif') no-repeat left;
    }


</style>
<script>
    function showHide(shID) {
        if (document.getElementById(shID)) {
            if (document.getElementById(shID+'-show').style.display != 'none') {
                document.getElementById(shID+'-show').style.display = 'none';
                document.getElementById(shID+'-hide').style.display = 'inline';
                document.getElementById(shID).style.height = 'auto';
            }
            else {
                document.getElementById(shID+'-show').style.display = 'inline';
                document.getElementById(shID+'-hide').style.display = 'none';
                document.getElementById(shID).style.height = '0px';
            }
        }
    }
</script>
{{for image in images:}}


    <div class="row">
        <div class="col-md-1 col-lg-2"></div>
        <div class = "col-md-10 col-lg-8">                      
            <div class="likes_comments" style="border-radius:7px; border: solid thin black;">
                <img class="image img-rounded img-responsive center-block" src="{{=URL('default', 'download', args=image.image_content)}}" />
                <div class="comments">                    
                    {{query = (db.image_likes.imageid == image.id) & (db.image_likes.author == (session.auth.user_id))}}
                    {{ list=db(query).select(db.image_likes.ALL) }}
                    {{ if len(list) ==0 :}}
                    <p class="heart" style="float: right;">
                    {{=A(INPUT(_type='button',_style="border-radius: 7px;background-color: #78E5E3;color:#000000;font-family:'Audiowide';font-size: 16px;", _value='Like', _action="" ), _href=URL("like", args=image.id ))}}
                    {{pass}}
                    {{query = (db.image_likes.imageid == image.id)}}
                    {{ list=db(query).select(db.image_likes.ALL) }}
                    {{=len(list)}} ❤
                    </p>  
                    <div class="readmore">
                        <a href="#" id="example-show" class="showLink" style="font-size:24px;"onclick="showHide('example');return false;">Read more</a>
                        <div id="example" class="more">
                            <div class="text" style="width:100%;color:red;font-family:'Josefin Slab';font-size: 22px;" >
                                Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                                Vestibulum vitae urna nulla.
                                Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam.
                                Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet.
                                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
                            </div>
                            <div id="text-content"style="width:100%;color:red;font-family:'Josefin Slab';font-size: 22px;">{{=image.caption}}</div>
                            <p>
                                <a href="#" id="example-hide" class="hideLink" style="font-size:24px;" onclick="showHide('example');return false;">Hide</a>
                            </p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-1 col-lg-2"></div>
    </div>
{{pass}}

Мы хорошо выбираем изображения из базы данных, когда дело доходит до секции readmore / Hide, она работает только с первым изображением. Проблема:

1. При прокрутке вниз к последующим изображениям, при нажатии кнопки readmore, текст на первом изображении является тем, который открывается только вверх. Как я могу сделать так, чтобы он читал только там, где хочет пользователь, нажимая кнопку?

2. Мне нужно сделать изображения в качестве фона и отображать дополнительный текст на переднем плане в дополнение к скрытому тексту. ,Как я могу это сделать.

С уважением