Inserting custom FB share button in post (Wordpress) - php

Question

Im trying to insert big custom FB share button.
I was able to make it appear, but the problem started to happen with jquery.
I am having 2 fb share buttons on the same post, but for only one of them share popup opens up. What must i do to make the second share popup work? You can find below the code im using:
<?php
/**
* The single post loop Default template
**/
if (have_posts()) {
the_post();
$td_mod_single = new td_module_single($post);
?>
<article id="post-<?php echo $td_mod_single->post->ID;?>" class="<?php echo join(' ', get_post_class());?>" <?php echo $td_mod_single->get_item_scope();?>>
<div class="td-post-header">
<?php echo $td_mod_single->get_category(); ?>
<header class="td-post-title">
<?php echo $td_mod_single->get_title();?>
<?php if (!empty($td_mod_single->td_post_theme_settings['td_subtitle'])) { ?>
<p class="td-post-sub-title"><?php echo $td_mod_single->td_post_theme_settings['td_subtitle'];?></p>
<?php } ?>
<div class="td-module-meta-info">
<?php echo $td_mod_single->get_author();?>
<?php echo $td_mod_single->get_date(false);?>
<?php echo $td_mod_single->get_comments();?>
<?php echo $td_mod_single->get_views();?>
</div>
</header>
</div>
<?php echo $td_mod_single->get_social_sharing_top();?>
<div class="td-post-content">
<div class="big-facebook-share" data-url="<?php echo home_url(add_query_arg(array(),$wp->request));?>" id="fb-share-button">
<span class="big-share-text"><?php _e('Share on facebook','fb');?></span>
</div>
<script>
jQuery(function(){
jQuery("#fb-share-button").on('click', function () {
fbShare(jQuery(this).attr("data-url"));
})
});
function fbShare(url) {
var width=640;
var height=320;
var leftPosition, topPosition;
leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
topPosition = (window.screen.height / 2) - ((height / 2) + 50);
var windowFeatures = "status=no,height=" + height + ",width=" + width + ",resizable=no,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no";
var u=location.href;
var t=document.title;
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url)+'&t='+encodeURIComponent(t),'sharer', windowFeatures);
return false;
}
</script>
<?php
// override the default featured image by the templates (single.php and home.php/index.php - blog loop)
if (!empty(td_global::$load_featured_img_from_template)) {
echo $td_mod_single->get_image(td_global::$load_featured_img_from_template);
} else {
echo $td_mod_single->get_image('td_696x0');
}
?>
<?php echo $td_mod_single->get_content();?>
<div align="center"> <?php echo do_shortcode('[fb_button]'); ?></div>
<div class="big-facebook-share" data-url="<?php echo home_url(add_query_arg(array(),$wp->request));?>" id="fb-share-button">
<span class="big-share-text"><?php _e('dhare on facebook','fb');?></span>
</div>
<?php echo do_shortcode('[fbcomments url="https://facebook.com/Facebook/" width="700" count="off" num="3" countmsg="wonderful comments!"]'); ?>
</div>
<footer>
<?php echo $td_mod_single->get_post_pagination();?>
<?php echo $td_mod_single->get_review();?>
<div class="td-post-source-tags">
<?php echo $td_mod_single->get_source_and_via();?>
<?php echo $td_mod_single->get_the_tags();?>
</div>
<?php echo $td_mod_single->get_social_sharing_bottom();?>
<?php echo $td_mod_single->get_next_prev_posts();?>
<?php echo $td_mod_single->get_author_box();?>
<?php echo $td_mod_single->get_item_scope_meta();?>
</footer>
</article> <!-- /.post -->
<?php echo $td_mod_single->related_posts();?>
<?php
} else {
//no posts
echo td_page_generator::no_posts();
}

Answer 1

Your jQuery selector is targeting the id and since the buttons have the same id (they should be unique), only one is working. Consider giving each button a unique id or update your jQuery selector to use class instead.
jQuery(".big-facebook-share").on("click", function() {...});