No being able to access all the details from a for loop in the view

[mostwanted]

I am working on a house rental application, i want users to easily notify one another of places they know via whatsapp, i have written the functionality and this is how it should work:

Next to the rental amount is a whatsapp sharing link that when the user clicks it carries forward all the rental details to their desired contact but now the problem i am facing is that on my list of rentals the details of the first link are missing, the user can't share all of them but the following link is able to share all its details, i hope i am clear! I have a feeling this is caused by the for loop just dont know how to rectify it, here is my code below:

CODE:

{{extend 'layout.html'}}
<span style="font-weight: bold; margin-top: 0px; position: absolute;">{{=breadcrumbs() }}</span>
      <script>
                        function goBack()
                        {
                            window.history.back();
                        }
                    </script>
<div id="goBack" style="position: absolute; right: 25px; color: white; font-weight: bold;" ><a href="javascript:history.back()" style="font-weight: bold;" id="back">BACK</a>
</div>
<br />
<div class="row">
    <div id="headfont4">
    Listed Rentals In Kanye & Surrounding Areas
    <span id="count"> <span class="number" style="color: white;">{{=houseCount}}</span> available houses up for rent
</div>
</div>
<hr />

    <div class='row'>
<table>
   <tr>
       <th>HOUSE OWNER</th>
       <th>CELL NUMBER</th>
       <th>HOUSE DESCRIPTION</th>
       <th>LOCATION</th>
       <th>RENTAL AMOUNT</th>
   </tr>
{{for details in details:}}

<!--THE JQUERY FOR ORCHESTRATING THE WHATSAPP SHARING-->
    <script>
$(document).ready(function() {
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
 $(document).on("click", '.whatsapp', function(e) {
     //const id = $(this).data('id'); // Extract the data-id attribute of the link.
        if( isMobile.any() ) {
            var text = $(this).attr("data-text");
            //var url = $('#' + id).attr("data-link");
            var message =text;
            var whatsapp_url = "whatsapp://send?text=" + message + "C/O SESOA&trade";
            window.location.href = whatsapp_url;
        } else {
            alert("This is only shareable on mobile devices!");

          }
     e.preventDefault();
    });
});
</script>
    <tr>
        <td>
       <div id="orgIcon3">{{=A(details.Surname, _href=URL('show', args=[details.id]))}} {{=details.Name}}</div><br />
        </td>
        <td>{{=details.Cell_Number}}</td>
        <td>{{=details.description}}</td>
        <td>{{=details.located_at}}</td>
                                          <!--THE WHATSAPP LINK FOR SHARING-->
        <td>{{=details.amount}}<div id="whatsapp"><a href="#" data-id="{{=details.id}}" class="whatsapp w3_whatsapp_btn w3_whatsapp_btn_large" data-text="Owner: {{=details.Name}} {{=details.Surname}}%0ACell: {{=details.Cell_Number}}%0AHouse Description: {{=details.description}}%0ALocation: {{=details.located_at}}%0ARent: {{=details.amount}}%0A" data-link="www.sesoa.co.bw">Share Details On Whatsapp</a></div></td>
        {{pass}}
    </tr>
{{pass}}
</table>
    </div>

 Regards

Mostwanted

[villas]

Not sure,  but maybe it is because you are using a class selector instead of id. 

In place of:

$(document).on("click", '.whatsapp', function(e) {


try:

$(document).on("click", '#whatsapp', function(e) {


[mostwanted]

Thanks for your input @villas but i can't change the link to an id because it already has a class is called whatsapp which is the one i am calling on the click function<a class="whatsapp w3_whatsapp_btn ....>




Mostwanted


[villas]

Well, mixing class and id names never reads very clearly, but I guess this isn't really a web2py problem anyway...

BTW  this isn't so good either:  for details in details:

Maybe better:  for d in details: