How to show entire text in a modal on click of ellipsis in JS?

I am working on a php code as shown below in which I have added ellipsis (...) after a particular word limit.

 <?php
      $programs = array();

      foreach ( $xml_files as $file ) {

      $xml = simplexml_load_file($src_dir."/".$file)  or die('Unable to load XML');

      $path_title_en = $xml->xpath('//StringAssetInfo[attrName="CASE_EPISODE_TITLE"]/value');

      $path_description_en = $xml->xpath('//TextAssetInfo[attrName="CASE_DESCRIPTION_ENGLISH"]/value');

      $programs[] = array(  "episode_title" => (string)$path_title_en, 
            "description" => (string)$path_description_en;  
            } 

      $program["episode_title"] = substr($program["episode_title"],0,50).' <a href="">(...)</a>';  /* ellipsis is added after a particular word limit */ 

      $program["description"] = substr($program["description"],0,100).' <a href="">(...)</a>';  /* ellipsis is added after a particular word limit */        
 ?>
 <table>
    <tr>
        <td style="width:8%; text-align:center;"><?php echo $program["episode_title"]; ?></td> /* Line A */
        <td style="width:8%; text-align:center;"><?php echo $program["description"]; ?></td>   /* Line B */
    </tr>
 </table>   

Line#A display the following text:

Flooding Concerns in
ABCSGSGSGSGSGSG and
SHSHSGFASGXDS (...)

Problem Statement:

I am wondering what JS code I need to add so that on click of (...) , full text show up in the modal something like this.

from How to show entire text in a modal on click of ellipsis in JS?