Javascript attachment problem when comment form is rendered via Panels

I'm using Panels and this is my HTML output in the page source:

<div class="form-item form-type-checkbox form-item-notify">
 <input type="checkbox" id="edit-notify--3" name="notify" value="1" class="form-checkbox" />  <label class="option" for="edit-notify--3">Notify me when new comments are posted </label>
</div>
<div id="edit-notify-type--3" class="form-radios"><div class="form-item form-type-radio form-item-notify-type">
 <input type="radio" id="edit-notify-type-1--3" name="notify_type" value="1" class="form-radio" />  <label class="option" for="edit-notify-type-1--3">All comments </label>
</div>
<div class="form-item form-type-radio form-item-notify-type">
 <input type="radio" id="edit-notify-type-2--3" name="notify_type" value="2" class="form-radio" />  <label class="option" for="edit-notify-type-2--3">Replies to my comment </label>
</div>

For whatever mysterious reason the #ids are modified so the JS is not attached. In theory it is also possible to output more than one comment form on the page via Panels, so as far as I know the use of #ids is generally discouraged. Using id=* instead of #id works for me:

(function ($) {
  Drupal.behaviors.commentNotify = {
    attach: function (context) {
      $('div[id*=edit-notify-type]', context).hide();
      $('input[id*=edit-notify]', context).bind('change', function() {
        if ($(this).attr('checked')) {
          $('div[id*=edit-notify-type]', context).show();
          if ($('div[id*=edit-notify-type input:checked]', context).length == 0) {
            $('div[id*=edit-notify-type input]', context)[0].checked = 'checked';
          }
        }
        else {
          $('div[id*=edit-notify-type]', context).hide();
        }
      });
      $('input[id*=edit-notify]', context).trigger('change');
    }
  }
})(jQuery);