Getting wrong results from a tootip after a for loop ina a view

[mostwanted]

 I have contact details of different places in my DB, the names of these different places are displayed as links in a page, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place. But that is not happening! What happens is that when i click the name of the place i get 2 tooltips stacked on top of each other displaying the wrong information!

TOOLTIP CSS code

#branch1 {outline:none; position: relative; font-weight: bold;}
#branch1 {text-decoration:none;}
/*#branches .contacts {}*/
span.contacts1{ display:inline; position:absolute; color:#111; border:1px solid #000000; background: #000000; opacity: 0.9; color: white; font-weight: bold; font-size: small; border:1px solid #000000; border-radius: 25px;/*border-radius: 5px 100px 5px;*/
; z-index:1; left: 40px; display:none; padding:14px 15px; margin-top:-56px; margin-left:70px; width:500px; line-height:16px;line-height:20px; }
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;} /*CSS3 extras*/

CONTROLLER CODE

def companies():
    results=db.services(request.args(0))
    rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name)
    return locals()

THE VIEW

<script>
            $(document).ready(function(){
            $('.branch1').click(function(e) {
                $(this).each(function(){
                    $('.contacts1').fadeIn();
                e.preventDefault();
            });
            });
             $('img#close').click(function(e)
             {
                 $('.contacts1').fadeOut();
                 e.preventDefault();
             });
            });
        </script>

     
<div class="comps">
<span class="companies">COMPANIES (A-F)</span><br /><br />
{{letters=['A', 'B', 'C', 'D', 'E', 'F']
    for company in rslts:
        if company.company_name[0] in letters:
    company.company_name
    }}

<a href="#" id="branch1" class="branch1 branches">{{=company.company_name}}</a><br />
<span class="contacts1">
<a href="#"><img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/></a>
    <div class="info" id="logo">
       <img id="companyLogo" width="140px" src="{{=URL('download', args=company.logo)}}" /><br />
       <span style="position: absolute; bottom:0px; left: 10px;">SESOA&trade;</span>
    </div>


    <div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details">
        <span class="companyName">{{=company.company_name}}</span>
        <hr class="divider" />
        <span class="contact" id="cell">TEL: </span><strong style="color:green;">{{=company.tel}}</strong><br />
<span class="contact" id="cell">EM@IL: </span> <strong style="color:green;">{{=company.email}}</strong><br />
<span class="contact" id="cell">CELL: </span><strong style="color:green;">{{=company.cell}}</strong><br />
    <span class="contact" id="fb">Facebook: </span>  <strong style="color:green;">{{=company.facebook}}</strong><br />

    <span class="contact" id="twit">Twitter: </span> <strong style="color:green;">{{=company.twitter}}</strong><br />
        <a href="{{=company.website}}" target="_blank"><span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">{{=company.website}}</strong></span></a><br />

<span class="contact" id="cell">FAX: </span> <strong style="color:green;">{{=company.fax}}</strong><br />
<span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">{{=company.located_at}}</strong><br />


    </div>
</span>

             {{pass}}
            {{pass}}
    </div>

<!----------------------------------------------------------------------------------------------------------------------------->

Below is the link to sample application giving problems

https://contacts.pythonanywhere.com/init/default/companies2/1

[Anthony]

See https://stackoverflow.com/a/52260646/440323.