Cloning a container with a button and its functionality

[Violet_82]

Hi guys,
I'm having some problem with cloning a div with a button in and its functionality. 2 words about the functionality first. Basically I'm creating some HTML with javascript (it has to be done that way I'm afraid) and append it at the top of the page. I also have to append the same HTML snippet at the bottom of the page and make sure that the button inside this container keeps the same functionality, This HTML snippet is essentially my cookie policy and when I click the "accept" button (wherever it is, top or bottom of the page) both buttons and their cookie containers need to disappear. But I can't get it to work. None of the two HTML snippets appear. Let's see some code:

$(document).ready(function(){
    initCookieAlert();//cookie function
    ...
});

/*COOKIES*/
function initCookieAlert(){
    //alert("initCookieAlert called");
    var $HTMLcookieString = $('<div class="cookie-alert" style="display:none"><div class="cookie-content"><p>We use cookies to improve your experience on our website. We never pass this data on. See our <a href="#" data-policy="cookiePol" class="cookiePol">Privacy Policy</a></p><div class="cookieButton"><a href="#" class="accept">Accept</a></div><div class="clear_floats"></div></div></div>');
    var $HTMLcookieStringClone = $HTMLcookieString.clone();//clone previous string
    //eraseCookie();//uncomment to test and delete cookies
    if(readCookie('COOKIE') != "accepted"){
        $("a.accept").click(function(event){//if the accept buttons are clicked
            alert("clicked");
            event.preventDefault();
            createCookie("COOKIE","accepted",365);
            $(this).parents("div.cookie-alert").hide();

        });
        $HTMLcookieString.appendTo(".carouselImages");//append first HTML       
        HTMLcookieStringClone.appendTo(".policyWrapper").show();//append clone and show
        $HTMLcookieString.show();
    }
}

So, to put things in context, this is an older version http://antonioborrillo.co.uk/agency_test/home.html where you can see the first cookie policy at the top. With the code above I should clone that and add it to the bottom of the page, except that none of them now appear

[gentlemedia]

On line 21 HTMLcookieStringClone should be this $HTMLcookieStringClone right?

[Violet_82]

Yes, copy and paste error, sorry for that, but that's not the issue. I refactor the whole thing in the end as I couldn't find a solution:

/*COOKIES*/
function initCookieAlert(){
    //alert("initCookieAlert called");
    var $HTMLcookieString = $('<div class="cookie-alert" style="display:none"><div class="cookie-content"><p>We use cookies to improve your experience on our website. We never pass this data on. See our <a href="#" data-policy="cookiePol" class="cookiePol">Privacy Policy</a></p><div class="cookieButton"><a href="#" class="accept">Accept</a></div><div class="clear_floats"></div></div></div>');
    //eraseCookie();//uncomment to test and delete cookies

    if(readCookie('COOKIE') != "accepted"){
        $HTMLcookieString.appendTo(".carouselImages");
        $HTMLcookieString.clone().appendTo(".policyWrapper").show();
        $HTMLcookieString.show();
        //console.log($(".cookieButton a").length + " cookie buttons");
        $(".cookieButton a").click(function(event){         
            event.preventDefault();
            createCookie("COOKIE","accepted",365);
            //$(".cookieButton a").parents("div.cookie-alert").hide();

            $(".cookieButton a").parents("div.cookie-alert").fadeOut(500, function(){
                if($(this).parents(".policyWrapper")){//if it's the button inside the policy container
                    $('html, body').animate({scrollTop:0}, 'fast');//scroll to the top
                }
            });
        });     
    }
}