Hide partial phone number until clicked

I am wanting to hide part of a phone number until clicked on using php. I came across this solution to mask the middle numbers which works well. However, I would like to mask the last 6 numbers and then have the number clickable to reveal the full number. Some numbers will be longer than others, so not all X characters long.

This is the solution code from another question. I have $number from user input that is inserted using some code in my php file, e.g. epa_member( 'mobile_number' ) which displays the number.

<?php

  $number = epa_member ( 'mobile_number' ); /* inserts member, phone number, e.g. 0414555000 */
  $middle_string ="";
  $length = strlen($number);

  if( $length < 3 ){
    echo $length == 1 ? "*" : "*". substr($number,  - 1);
  }
  else
  {
    $part_size = floor( $length / 3 ) ;
    $middle_part_size = $length - ( $part_size * 2 );
    for( $i=0; $i < $middle_part_size ; $i ++ ){
       $middle_string .= "*";
    }
    echo  substr($number, 0, $part_size ) . $middle_string  . substr($number,  - $part_size );
 }
 ?>

Thanks

You need javascript also with php for this. Here is a code, try this:-

For PHP:-

$number = '0414555000';
$length = strlen($number);
$mask_length = 6;
if($mask_length < 6){
  // For Less than 6 digits, you can update as you wish
}else{
  $unmask_length = $length - 6;
  $unmask_digits = substr($number,0,$unmask_length);
  $mask_chars = str_split(substr($number,-$mask_length));
  $mask_digits = '';
  foreach($mask_chars as $char){
	$mask_digits .= "<span class='mask-character' data-char=" . $char . ">*</span>";
  }
}
echo "<div id='phone_number'> " . $unmask_digits . $mask_digits . "</div>";

I leave the if condition, for digits less than 6. You can adjust as you you wish. After this, the last 6 digits will be masked. I render the digits inside a div with id "phone_number".

Now on JavaScript, I am assuming when user click on div with id "phone_number", the masked characters will be visible to user:-

document.querySelector("#phone_number").addEventListener("click", (e) => {
   document.querySelectorAll(".mask-character").forEach((char) => {
     char.innerText = char.dataset.char;
   });
});

For Quick Testing here, I am pasting the html that is rendered after PHP parse the code, and also linked the JavaScript:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelector("#phone_number").addEventListener("click", (e) => {
   document.querySelectorAll(".mask-character").forEach((char) => {
        char.innerText = char.dataset.char;
   });
})

<!-- language: lang-html -->

<div id="phone_number"> 0414
  <span class="mask-character" data-char="5">*</span>
  <span class="mask-character" data-char="5">*</span>
  <span class="mask-character" data-char="5">*</span>
  <span class="mask-character" data-char="0">*</span>
  <span class="mask-character" data-char="0">*</span>
  <span class="mask-character" data-char="0">*</span>
</div>

<!-- end snippet -->

Hope it will be helpful.