I have this:

<script>
  $(function() {
    $('#clientStatus').on('show.bs.modal', function(event) {
      var button = $(event.relatedTarget); // Button that triggered the modal
      var theclientCurrentStatus = button.data('clientcurrentstatus'); // Extract info from data-* attributes
      var clientusername = button.data('clientusername');
      // $("#radio_1").prop("checked", true); 
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this);
      modal.find('#clientcurrentstatus').val(theclientCurrentStatus);
      modal.find('#clientusername').val(clientusername);
    });
  });    
</script>

It passes the data values to the bootstrap modal. However, what it actually do is that it sets the value of the data I am passing to the id of the input in the modal:

<input type="text" id="clientcurrentstatus" readonly>

When I output this to screen, it shows the value of clientcurrentstatus which in this case is active. However, when I try to access the value of the id, it doesn't work and instead show me this:

console.log(document.getElementById('clientcurrentstatus').value)

How can I access this value of the id?