Wondering why my JQuery array loop is not setting my href's correctly...

So let me give you an idea of what I am doing. This is some homework I am working on and now have become stuck. I am creating a page wherein you can select from a bunch of different check boxes. Depending on the check boxes you can click on a "show resources" button that I have programmed to open a new window with the corresponding check boxes to show their values, their values also being the URL to those particular resources. Sounds easy right? Here is the basic structure of things.

//this is the main function that is making an array of the checked check boxes and displying them on the new window, problem is I am only able to set the href attibute to only the first array item...
$(function() {
    $(":checkbox").change(function() {
      var arr = $(":checkbox:checked").map(function() { return $(this).val(); }).get();
            $("#messagepop").html('<a id="resourceLink">' + arr.join('</a><br><a id="resourceLink">') + '</a>');
      for (var i = 0; i < arr.length; i++){
        $("#resourceLink").attr('href', arr[i]);
      }
    });
  });

//these are functions for the new window
  function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
  }

  $(function() {
    $('#contact').on('click', function() {
      if($(this).hasClass('selected')) {
        deselect($(this));               
      } else {
        $(this).addClass('selected');
        $('.pop').slideFadeToggle();
      }
      return false;
    });

    $('.close').on('click', function() {
      deselect($('#contact'));
      return false;
    });
  });

  $.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
  };

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

<script src="http://ift.tt/1oMJErh"></script>
<div id="slide4">
    <h1>Resources</h1>
    <p>(Select the resources you wish to receive information about. Click on the "Show Resources" button when you are ready)</p>
    <form action="">
      <input type="checkbox" value="http://ift.tt/1MHYnjU">Career Preparation<br>
      <input type="checkbox" value="http://ift.tt/1j0cncs">College Advising<br>
      <input type="checkbox" value="http://ift.tt/1MHYkV6">Financial Aid<br>
      <input type="checkbox" value="http://ift.tt/1j0co04">Fitness & Recreation<br>
      <input type="checkbox" value="http://ift.tt/1MHYnA8">Health Services<br>
      <input type="checkbox" value="http://ift.tt/1j0cncu">Housing<br>
      <input type="checkbox" value="http://ift.tt/1MHYkV8">Library<br>
      <input type="checkbox" value="http://ift.tt/1j0co06">Parking<br>
      <input type="checkbox" value="http://ift.tt/1j0cncu">Scholarships<br>
      <input type="checkbox" value="http://ift.tt/1MHYkV9">Student Employment<br>
      <input type="checkbox" value="http://ift.tt/1j0co08">Student Organizations<br>
      <input type="checkbox" value="http://ift.tt/1MHYnAa">Tutoring Support<br>
      <input type="checkbox" value="http://ift.tt/1j0cncA">Writing Support<br>
    </form>

   
<div class="messagepop pop">
  <p><a class="close" href="/">Close</a></p>
  <div id="messagepop" >
    
  </div>
</div>

<a href="/contact" id="contact">Show Resources</a>

</div>

So the problem that I am running into is that I am not able to correctly set the href attributes on the new tags that are being shown in the new div window. The kicker for all of this is that I have to make an array with the checked checkboxes and have them link to their appropriate resources.

So the real question is, what am I missing? I can see that the array has the right element links, so why are they not showing up on the rest of the displayed elements. Hope this makes sense, please let me know if what I am showing you here is confusing or if I need to clarify, thanks!