How to place content of a div inside link on php while loop

Question

Please I'm new to coding and I have a project i am working on.

I have a php while loop code that diplay 5 posts

I also have a jQuery code to display modal for the while loop with post url

The problem I'm face here is that the displayed url is inside a div

<p id="url"></p> this show the url

I want to add it as url.

I have tried <a href='<p id="url"></p>'> Click to view</a>

But the link will not show

I have tried echo it still not showing.

I have been on this for two days now

The modal that display the content is outside the while loop and working

I need help

My ajax code

<script>

    function showModal(id)
    {
        $("#url").text($("#url_"+id).text());
    
    }

</script>

Php loop code

    `<?php 
                foreach ($posts as $key => $result) {   ?>      
     <div href="#" data-toggle="modal" data-target="#myModal" onClick="showModal(<?php echo $id ;  ?>)" class="side-icon share-btn">
              <i class="fa fa-share share-icon"></i> View link
                       <?php } ?>

      <div class="modal fade" id="myModal" role="dialog" >
    <div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
<div class="modal-content">
            <div class="modal-header">
    <center><h4>Share with friends</h4></center>
        <?php $t='<p id="name"></p>';
        $t1?>
    <a href="<? $t?>">. Click to view</a>
            </div>
      

`

The id containers the url from MySQL table The issue I'm facing is that, <p id="url"></p> is just showing www. example.com as plain test on user view but can't make it work as link to click

Answer 1

A hyperlink a is not necessary to invoke the modal dialog - most DOM elements can invoke whatever function you like. You assign an event listener either to all nodes of interest or a delegated listener bound to a common parent element. The snippet below might be of use?

// add delegated listener on the containing node that has the content that is to be clicked
// by the user to invoke the modal dialog.

document.querySelector('div.urls').addEventListener('click', function(e) {
  // Only process nodes that are not the specified target itself. ie: it's children
  if (e.target != e.currentTarget) {
    let modal=document.getElementById('myModal');


    // add the content from the clicked node to the modal somewhere
    let link = modal.querySelector('a[data-id="modal-target"]');
        link.setAttribute('href', e.target.textContent);
        link.innerHTML = 'Click to view';
  }
});

.url:hover {
  color: red
}
.url {
  cursor: pointer;
}

<div class='urls'>
  <p class='url'>https://www.example.com</p>
  <p class='url'>https://www.banana.com</p>
  <p class='url'>https://www.bogus.org</p>
</div>



<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog" style="position:absolute;bottom:0;margin:0;width:100%;">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header"></div>
      
      <a data-id='modal-target'></a>

    </div>
  </div>
</div>