So your jQuery code from the OP was not correct. You have what you want as the password in a span and are applying a type attribute to that.

If you check the MDN Docs, you will learn that there is no type attribute for a span, as spans only support Global Attributes. The input element uses both the type: text and type: password, see the docs here.

But if you want to have the span as your element, you can change your jQuery event handler to the following: .toggleClass('hidden'); and create a hidden CSS class with the properties display: none;

$('.hide-id').on('click', function () {
   $('.patient-id-content').toggleClass('hidden');
 });

.hidden { display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <p>
      <input class="patient-id-content" type="text" value="34324345">      
      <button class="hide-id">
        Hide
      </button>
    </p>
  </div>

Here is what you need.

 $(".hide-id").on("click", function () {
      var span = $(".patient-id-content");
      var spanText = span.text();
      if (!spanText.indexOf("*")) {
        $(".patient-id-content").text(span.attr("data-oldText"));
        return;
      }

      var starText = "";
      for (let i = 0; i < spanText.length; i++) starText += "*";
      $(".patient-id-content")
        .attr("data-oldText", spanText)
        .text(starText);
    });

working example on jsfiddle: https://jsfiddle.net/ynojkf0q/

This is a simple solution for the functionality you want. It will need more styling to get it to look exactly the the example you provided above.

HTML

 <div class="container">
    <p>
      <input class="patient-id-content" type="password" value="34324345">
      <button id="pass-toggle" class="hide-id" onclick="toggleShowPassword()">
        Show
      </button>
    </p>
  </div>

JS

let passwordVisible = false;
 
 function toggleShowPassword() {
    let inputType = 'password';
  passwordVisible = !passwordVisible;
  
  
  if (passwordVisible) {
    inputType = 'text';
    $('#pass-toggle').addClass( "show-id" ).text( 'Hide' );
  } else {
     $('#pass-toggle').removeClass( "show-id" ).text( 'Show' );
  }
  
  $('.patient-id-content').attr('type', inputType);

CSS

.patient-id-content {
  border: 0;
}