Javascipt issue on custom theme

First off I always seem to have trouble getting my JS to work with WP. Currently I need some help figuring out what is going wrong with my javascript and ultimately what I am doing wrong. I have this code:

(function($) {

    // This works on WP site and on CodePen
    // $("p.click-me").click(function(){
    //      alert("The paragraph was clicked.");
    // });

    // Masonry Code  
    $('#posts').masonry({
          itemSelector : '.item'
        });
    $('#main #posts').masonry({
          itemSelector : '.item'
        });

    // This works on CodePen but not on WP site
    $("p.click-me").click(function(){
        alert("The paragraph was clicked.");
    });

})(jQuery);

The masonry script is enqueued via the function file like so:

wp_enqueue_script( 'ccd-jquery', ‘//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js',true);

Then my script is next:

wp_enqueue_script( 'ccd-javascripts', get_template_directory_uri().’/js/ccd-javascripts.js',array(),'1.0',true);

If I do the alert above the masonry code it works, however if I do it below it will not on the Wordpress site. However on my CodePen, it will work either way.

Can someone please help explain to me what I am doing wrong and how to fix this?

--Update-- Based on the feedback from cybmeta I revised my enqueue to be like so:

wp_enqueue_style( 'template-css', get_template_directory_uri().'/css/template.css');

//CDN Load
wp_enqueue_script( 'ccd-bootstrap', '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js', array('jquery') ,true);
wp_enqueue_script( 'ccd-respond', '//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js', array('jquery') ,true);
// wp_enqueue_script( 'ccd-jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js',true); //Not using this since WP loads already

// Masonry script depends on jQuery (already registered by WordPress)
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js', array('jquery') );

// ccd-javascripts depends on jQuery and the "masonry" script
wp_enqueue_script( 'ccd-javascripts', get_template_directory_uri().'/js/ccd-javascripts.js', array('jquery', 'masonry'));

But it still isn't working correctly on the WP site. Instead of doing what its supposed to it stacks them all in 1 column. Changing the width of the column has no effect.