Q:

How to preserve entered input value and display it with label with updated value

I am trying to display entered input value with label every time when user click on the test button, the input value should be updated every time when user enter new value in input section that means previous value should be deleted. 
here what i have tried but somehow i am not able to display entered value. 

       
      $(document).ready(function () {

          var testBtnSrc = document.getElementById("test_btn_src");
            testBtnSrc.addEventListener("click", function(){
              $('inp_src_success').append($('inp_src').val());
            });
                });
<title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      </head>
      <body>
        <div id = "inp_src_success">
          <label>input value here </label>
        </div>
        <div>
          <label>Enter</label>
          <input  id = "inp_src" name="txtbox_ip_src" minlength="7" maxlength="15" class="form-control" type="text"
              placeholder="Source Server Ip:"
              pattern="(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" 
              required onkeypress="myFunction()" />
              <div id = "inp_src1"></div>
              <button id  = "test_btn_src" class="btn btn-primary success" type="button" style=" font-size: 10px; margin-top:7px;">Test</button>
        </div>

A:

try following jQuery code
$(document).ready(function () {
  $('#test_btn_src').click(function(){
    $('#inp_src_success').text($('#inp_src').val());
  });
});

