jQuery and jQuery plugin unique id select

I'm using https://craftpip.github.io/jquery-confirm/ plugin. I need to be able to select unique element id's that were dynamically loaded from the database.

 <div><a id="1" href="1">1</a></div>
 <div><a id="2" href="2">2</a></div>
 <div><a id="3" href="2">3</a></div>

Jquery

 $('#1').confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });

My question is how could I select an element's id when clicked. I know how to do it with plain JavaScript. A little more info about what I'm trying to do. It's blog entries generated dynamically from the database. Each div represents a blog post and the <a> tag represents the icon that when pressed is going to call ajax to delete that blog post. After you confirm that you really want to delete.

In JavaScript I would do something like this.

 <div><a  id="1"  href="1" onclick="many(this.id)">1</a></div>
 <div><a  id="2" href="2" onclick="many(this.id)">2</a></div>
 <div><a  id="3" href="2" onclick="many(this.id)">3</a></div>

the script

   function many(id) 
{
///ajax call 

}

I just don't want JavaScript's default confirm box, so I'm going with a jQuery plug-in.

Also tried doing something like this, but jQuery doesn't work from inside a JavaScript function

     function many(id) 
{
    $('#'+id).confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });
}

PHP while loop

<?php  while ($row = $result->fetch()){ ?>
<article id="<?php echo $row['article_id'];?>">
    <div class="body>
       <h1><?php echo $row['title'];?></h1>
       <p><?php echo $row['article'];?></p>
       <div><a id="<?php echo $row['article_id'];?>" class="delete">x</a></div>
    </div>
</article>
<?php }?>

This is what ended up working for me.

$('.someClass').click( function(event) {
    var ele = $(this).attr('rel');
    // ele is the element you clicked on
    $.confirm({
    title: 'Delete!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
         var dataString = "blogpost="+ele;
        $.ajax({
            type: "POST",
            url: "http://localhost/new12/scripts/delete_blog_ajax.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                if(html)
                {

                    $("#aid"+ele).fadeOut('slow', function(){
                        $(this).remove();
                    });

                        return false;
                }
            }
        });
        return true;
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 });

});

After a confirm press I do a Ajax call. On success, it deletes fades out the element and with a call back function to remove the element from the DOM. Thanks for everyone that tried to help.

Solution

I think what you're asking is how to call .confirm() on the clicked element? Try this, you don't need to know the ID because inside of callback functions in jquery event handlers, this refers to the element that the event was triggered on.

$('a').click(function () {
  $(this).confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to delete!',
    confirm: function(){
      console.log(this.content);
    },
    cancel: function(){
      $.alert('Canceled!')
    }
 })
});

I would add, however, that Dan Def is correct about the fact that you'll probably want to wrap these elements in a surrounding div so that you don't add a click handler to every a tag on the page. So in that case, instead of $('a').click(...) in the snippet above, it would be $('#divId').find('a').click(...)