colorbox - button needs to be click twice for onclick to trigger

I am using colorbox.

User need to click twice to open colorbox and run audio player in opened iframe ...

<td data-label="Play Now">
  <div data-id="<?php  echo $data['lecture_id'];?>"> // It is for another ajax to update database. working ok.
    <a href="javascript:void(0);" data-url="recordings-play.php?play-audio=<?php echo $data['lecture_id'];?>" target="_top"  class="btn btn-success colorbox1">Play</a>
  </div>

  <script>
    $(document).on("click", ".colorbox1", function(){
      $('.colorbox1').colorbox({
        href: $(this).data('url'),
        iframe: true,
        innerWidth: '95%',
        innerHeight:'70%',
        opacity : 0,
        fixed:true,
        escKey: false,
        overlayClose: false,

        onOpen: function() {
          $('#cboxOverlay,#colorbox').css('visibility', 'hidden');
          
          $('#cboxOverlay').css({
            'visibility': 'visible',
            'opacity': 0.9,
            'cursor': 'pointer'
          }).animate({
            height: ['toggle', 'swing'],
            opacity: 'toggle'
          }, 100 , function() {
            $('#colorbox').css({
              'visibility': 'visible'
            }).fadeIn(300);
          });
        }

      });
    });
  </script>

</td>

May be I am creating colorbox on first click and opening it on second click. But not getting how to sort it out.

Your help is appreciated...

Like @skobaljic said, remove the click handler which is superfluous.

Then about the audio loading, I think the issue is due to $(this) in the href option you are passing. The options are contained in an object... And when the plugin really is executing $(this).data('url'), this is not .colorbox1 anymore.

So this should work:

<td data-label="Play Now">
  <div data-id="<?php  echo $data['lecture_id'];?>"> // It is for another ajax to update database. working ok.
    <a href="javascript:void(0);" data-url="recordings-play.php?play-audio=<?php echo $data['lecture_id'];?>" target="_top"  class="btn btn-success colorbox1">Play</a>
  </div>

  <script>
    $('.colorbox1').colorbox({
      href: $('.colorbox1').data('url'),  // <-- use the right selector instead of this
      iframe: true,
      innerWidth: '95%',
      innerHeight:'70%',
      opacity : 0,
      fixed:true,
      escKey: false,
      overlayClose: false,

      onOpen: function() {
        $('#cboxOverlay,#colorbox').css('visibility', 'hidden');
        
        $('#cboxOverlay').css({
          'visibility': 'visible',
          'opacity': 0.9,
          'cursor': 'pointer'
        }).animate({
          height: ['toggle', 'swing'],
          opacity: 'toggle'
        }, 100 , function() {
          $('#colorbox').css({
            'visibility': 'visible'
          }).fadeIn(300);
        });
      }

    });
  </script>

</td>