jQuery stops working when including Bootstrap 5

I've been trying to create a button that shows some input fields when clicked using jQuery (latest version 3.7.1) and it works just fine. However, when I add the tags

// jQuery code to make button work

  $(document).ready(function(){

    $("#button").click(function() {
      $("#fn").show();
      $("#ln").show();
    });
  });

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>jQuery and Bootstrap 5</title>
    
      
      <!-- including jQuery-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      
        
      <!-- including Bootstrap 5 -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
       

    
  </head>
  <body>
      
      <input id="button" type="button" value="Click">
      <br>
      <div id="fn" hidden>First Name :
        <input type="text" />
      </div>
      <br>
      <div id="ln" hidden>Last Name :
        <input type="text" />
      </div>
      
  </body>

Is there any way I can make the jQuery code work with Bootstrap? If this is not possible, can anyone suggest a way to implement the same functionality using Bootstrap only?

Thank you!

Solution

as can be seen in the reference

Since [hidden] is not compatible with jQuery's $(...).hide() and $(...).show() methods

you can use removeAttr() method, this worked for me

 $(document).ready(function(){
            
          $("#button").click(function() {
            $("#fn").removeAttr('hidden');
            $("#ln").removeAttr('hidden');
          });
        });

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>jQuery and Bootstrap 5</title>
    
      
      <!-- including jQuery-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      
        
      <!-- including Bootstrap 5 -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
       
   
  </head>
  <body>
      
      <input id="button" type="button" value="Click">
      <br>
      <div id="fn" hidden> First Name :
        <input type="text" />
      </div>
      <br>
      <div id="ln" hidden>Last Name :
        <input type="text" />
      </div>
      
  </body>
</html>