getElementById Where Element is dynamically created and appended to DOM

Question

I'm executing 2 scripts. The first script (jquery) creates an input and appends it to a form. The second script grabs the value of the dynamically created input. But right now I'm getting null value. To get every question out of the way, yes the first script has been tested multiple times and the input is indeed created and the value appended properly. How do I get the value from the dynamically created Element in the second script?

first script

<script src="js/firstscript.js"></script>
  $(document).ready(function(e){
    $('.button').click(function(e){

      e.preventDefault();
      var userCurrency = 'usd';

      $('<input>').attr({
        type: 'hidden',
        id: 'userCurrency',
        name: 'userCurrency',
        value: userCurrency
      }).appendTo('#payment-form');

  })
})

second script

<script>
  //get currency
  var amountCurrency = document.getElementById('userCurrency');
  console.log(amountCurrency);
</script>

Answer 1

I fixed my problem and I basically just mix jquery and javascript together. Yeah I know bad practice whatnot but for now it works flawlessly and that's what matters for the team.

So in short that's the end result. Nothing magic but it did it for me :

<script src="js/firstscript.js"></script>
  $(document).ready(function(e){
    $('.button').click(function(e){

      e.preventDefault();
      var userCurrency = 'usd';

      $('<input>').attr({
        type: 'hidden',
        id: 'userCurrency',
        name: 'userCurrency',
        value: userCurrency
      }).appendTo('#payment-form');

  })
})

//vanilla javascript code below
var amountCurrency = userCurrency;