Table cells as Password but Display the Last Four Digits

Question

I want to hide some information on my table cells but display the last four digits of the cells, I am able to hide the cell using the CSS below but I do not know how to show the last four digits of the cells.

I am also aware that with the CSS method that I used below to hide the table cells information, my content can still be inspected, and viewed but I am using the content on a mobile app, not a website which I think is safe for what I want to use the content for.

How to display the last four digits on the table cells .

.hidetext {
  -webkit-text-security: circle;
}

<table>

  <tr>
    <td width="120">ID NUMBER</td>
    <td width="15">:</td>
    <td id="data2" class="hidetext">1234567890</td>
  </tr>

  <tr>
    <td>PHONE</td>
    <td>:</td>
    <td id="data3" class="hidetext">0000000000</td>
  </tr>

</table>

Answer 1

You can use this code to iterate the string and replace it with "X" or with your desired character.

var id_number = document.getElementById('data2');
id_number.innerHTML = new Array(id_number.innerHTML.length-3).join('x') + 
id_number.innerHTML.substr(id_number.innerHTML.length-4, 4);
console.log(id_number.innerHTML);

var phone = document.getElementById('data3');
phone.innerHTML = new Array(phone.innerHTML.length-3).join('x') + 
phone.innerHTML.substr(phone.innerHTML.length-4, 4);
console.log(phone.innerHTML);

<table>
                  
              <tr>
                    <td width = "120">ID NUMBER</td>
                    <td width = "15">:</td>
                    <td id="data2" class="hidetext">1234567890</td>
                  </tr>
                  
                  <tr>
                    <td>PHONE</td>
                    <td>:</td>
                    <td id="data3" class="hidetext">0000000000</td>
                  </tr>  
                  
</table>