Facebook SDK Share button not showing up

So, I'm trying to implement the plugin for share on fb button but it's not showing up. The button is there but it automatically has a class that hides it that comes from facebook SDK not me and I don't know how to take it out.

html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        </head>
    <body>
        <div id="fb-root"></div>
        <script>
            $(document).ready(function () {
                window.fbAsyncInit = function() {
                    FB.init({
                        appId      : '1633098193720369',
                        cookie     : true,
                        xfbml      : true,
                        version    : 'v13.0',
                    });
    
                    FB.getLoginStatus(function(response) {
                        statusChangeCallback(response);
                    });
                };
    
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) {return;}
                    js = d.createElement(s); js.id = id;
                    js.src = "https://connect.facebook.net/en_US/sdk.js";
                    fjs.parentNode.insertBefore(js, fjs);
                } (document, 'script', 'facebook-jssdk'));
    
                function statusChangeCallback(response) {
                    if(response.status === 'connected') {
                        console.log('Logged in and anthenticated');
                    } else {
                        console.log('Not authenticated');
                    }
                }
    
                function checkLoginState() {
                    FB.getLoginStatus(function(response) {
                        statusChangeCallback(response);
                    });
                }

                window.logout = function () {
                    FB.logout(function () {
                        window.location.reload(true);
                    });
                };
            });
        </script>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<div id="#share-on-fb"></div>
    </body>
    </html>

Then I add the fb button from a javascript file along with the content I want to show:

$('head').append('<meta property="og:image" content="https://encuentrame.org.xelar.tech/static/images/' + post.foto + '" />');
let shareOnFb = $('#share-on-fb');
shareOnFb.append('<div class="fb-share-button" data-href="' + url + '" data-layout="button" data-size="small"></div>');

Take a look at the page, the button div is there but height is 0 automatically https://imgur.com/gallery/pGh46er