How to change iframe src when click date in calendar?

Question

I use jquery balloon to show iframe when I click date in my calendar.
Here is the link for jquery balloon
I want to get the clicked date and send it through url in iframe.
So I can use it using $_GET
But I have a lot of difficulties
Here's my code:

<script type="text/javascript">
  var shown = true;
  $(function() {
  $.balloon.defaults.classname = "my-balloon";
  $.balloon.defaults.css = null;
    $('.date').on("click", function() {
      if (shown) {
        $('.date').hideBalloon();
        $(this).showBalloon();
        // Get text from what I click and used it in iframe src
        document.getElementById('iframe-date').src += '&date=' + $(this).text()
        shown = false;
      } else {
        $('.date').hideBalloon();
        shown = true;
      }
    }).showBalloon({
      //iframe is on contents
      contents: '<div style="text-align:right">'
        + '<img style="width:15px" onclick="closeBalloon()" src="<?php echo get_uri('public/images/icon-error.png') ?>">'
        + '</div>'
        + '<iframe id="iframe-date" scrolling="no" seamless="seamless" src="<?php echo get_uri('admin/room/iframeDate/?id=' . $id) ?>"><p>Your browser does not support iframes.</p></iframe>'
    });

    $('.date').hideBalloon();
  }); 

  function closeBalloon()
  {
    $('.date').hideBalloon();
    shown = true;
  }
</script>