Need product id dynamically in a button which is appended through javascript in magento 1.9

Question

I am creating an extension of products quick view. For that, i have given an option in admin panel to choose if a user is using custom template or default. if he uses default template: in that condition, i am overwriting list.phtml but if he uses a custom template am adding a class name to which I am adding a button in that class using javascript. But while doing that I need that whenever a button is clicked, it fetches the current click product id: I cannot do that, I tried something which I am sharing with you:

<?php
$customThemeStatus = Mage::getStoreConfig('product_quickview/settings/custom_theme');  
if ($customThemeStatus == '1') {  ?>
    <script type="text/javascript" src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_JS) . 'ranosys-quickview.js';?>">
    </script> 
    <script type="text/javascript">
    function myFunction(cname,bname)
    {
        x=document.getElementsByClassName(cname); // Find the element
        console.log(x);
        for(var i = 0; i < x.length; i++) {
            x[i].innerHTML+="<button class='myBtn' id='"+<?php echo $productObject->getId(); ?>+"' type='button' title='"+bname+"' class='button btn-cart'>"+bname+"</button>";    // Change the content
        }
    }
   </script>

in above script i am trying to send clicked product id in below ajax request. and this is a page which getting included in the list.phtml

<?php
$quicViewSelectorName = Mage::getStoreConfig('product_quickview/settingsselector_name');
$quickViewButtonText  = Mage::getStoreConfig('product_quickview/settingsbutton_text');
echo "<script>myFunction('$quicViewSelectorName','$quickViewButtonText');/script>";
?> 
<div id="myModal" class="modal">    
   <!-- Modal content -->
   <div class="modal-content">
     <span class="close">&times;</span>
     <p id="results">Modal..</p>
   </div>    
</div>
<script>
   jQuery(document).ready(function(){
   var modal = document.getElementById('myModal'); 
   jQuery(".myBtn").click(function() {
        var id = this.id;
        jQuery.ajax({      
            type: "POST",
            data: 'pid=' + id,
            dataType: 'html',
            url: "<?php echo Mage::getBaseUrl() . 'quickview/indexproductinfo';?>",
            success:function(response){                       
                if (response){
                    modal.style.display = "block";
                    jQuery('#results').html(response);
                }
            }
        });
   });

   jQuery(".modal-content .close").click(function(){
       modal.style.display = "none";
   });     
   });
   </script>
<?php }

Answer 1

replce below line

 var id = this.id;

With this line

var id = this.attr('id');