How to call back text from p tag to the input text feild?

There are two identical ids and i just want to add some jquery which will do the following job, whenever p tag text changes then input value automatically changes itself according to text of p tag.

    $(document).ready(function(){
                $('#walletconnect').hover(function(){
                    //MOUSE ENTERS
                    $('#walletconnect').css('display', 'block');
                    var x = $('#walletconnect').text();
                    $('#walletaddressinput').text(x);
//Here you can use $('#tooltip').text(x); to make text display in the tooltip

                },function(){
                    //MOUSE LEAVES
                    $('#walletaddressinput').css('display', 'none');
             
                });
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="App">
  <div><button class="btn btn-primary my-4" type="button">WalletConnect</button></div>
  <p id="walletconnect">0x779d4E727232*********BDBC03aE84C</p>
</div>
<input type="text" name="wallet_address" class="form-control" id="walletaddresssinput" maxlength="50" placeholder="Wallet address" title="" required="">

Answer

give it a try, clicking on the connect button

$(document).ready(function() {
    var x = $('#walletconnect');
  $('.btn').on('click', function() {
    x.text("newtext");
  });
  $(document).on("DOMSubtreeModified", "#walletconnect", function() {
      $('#walletaddresssinput').val(x.text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="App">
  <div><button class="btn btn-primary my-4" type="button">WalletConnect</button></div>
  <p id="walletconnect">0x779d4E727232*********BDBC03aE84C</p>
</div>
<input type="text" name="wallet_address" class="form-control" id="walletaddresssinput" maxlength="50" placeholder="Wallet address" title="" required="">