Format currency input field with dollar sign & commas

I have a revenue input field in a javascript/jquery form:

1. Need a dollar sign :before
2. add commas as the currency increases

I have a dollar sign showing via css, but issues centering it and ensuring the field entry point is next to it without overlapping. Unsure how to do the commas. Any suggestions or tips are welcome!

HTML:

  <form id="rev-calculator">
  <label for="price">Monthly Revenue</label>
  <div class="fields">
    <input type="number" name="price" id="price" min="0" max="10000000000" required data-type="number"> </input>
    <br>
  </form>

CSS:

  <style>
      .body {
        text-align: left;
      }
      
      .fields {
        margin: 0 10px 0 0;
      }
      
      .fields:before {
        content: "$";
        text-align: center;
        position: relative;
        left:30px;
      }
      
      #price {
        border-radius: 5px;
        margin: 15px;
        padding: 10px;
        color: black;
      }
    </style>

JS:

<script>
  $('#rev-calculator').on('click', 'button', function(e) {
    e.preventDefault();
    var price = $("#price").val();
    console.log(price);
  })
</script>

codepen: https://codepen.io/kedarPE/pen/JjroYyb

input field