FB Share JavaScript "share_button is not defined"

Hello I am trying to implement the share of facebook in my javascript code, however I get this error, I tried several solutions suggested but none was successful in its my implementation.

Could someone help me correct this error?

Thanks in advance. Any help is welcome.

Full code: https://pastebin.com/kSgFDf0L

Error on console.

FB Share JavaScript "share_button is not defined"

$(document).ready(function() {



window.fbAsyncInit = function() {
FB.init({appId: 'xxxx', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'http://www.groupstudy.in/articlePost.php?id=A_111213073144',
picture: 'http://www.groupstudy.in/img/logo3.jpeg',
caption: 'Top 3 reasons why you should care about your finance',
description: "What happens when you don't take care of your finances? Just look at our country -- you spend irresponsibly, get in debt up to your eyeballs, and stress about how you're going to make ends meet. The difference is that you don't have a glut of taxpayers…",
message: ""
});
});
});
    $(".result").on("click", function() {
        
        var id = $(this).attr("data-linkId");
        var url = $(this).attr("href");

        if(!id) {
            alert("data-linkId attribute not found");
        }

        increaseLinkClicks(id, url);

        return false;
    });


    var grid = $(".imageResults");

    grid.on("layoutComplete", function() {
        $(".gridItem img").css("visibility", "visible");
    });

    grid.masonry({
        itemSelector: ".gridItem",
        columnWidth: 200,
        gutter: 5,
        isInitLayout: false
    });


    $("[data-fancybox]").fancybox({

        caption : function( instance, item ) {
            var caption = $(this).data('caption') || '';
            var siteUrl = $(this).data('siteurl') || '';
            


            if ( item.type === 'image' ) {
                caption = (caption.length ? caption + '<br />' : '')
                 + '<a href="' + item.src + '">View image</a><br>'
                 + '<a href="' + siteUrl + '">Visit page</a><br>'
                 + '<a href="' + share_button + '">Share</a>';

            }