How to add label before textbox

How to add label before textbox

Hi - First time poster here.  I've never used jquery or much javascript at all.  I have to add a label above 2 text boxes - I've tried various ways of using append and prepend and nothing works.  This is the code I have:
  1. <form class= "login-form">
  2. <div class="form-group">
  3. <input class="form-control" placeholder="Username"></input>
  4. </div>
  5. <div class="form-group">
  6.                 <input class="form-control" placeholder="Password"></input>
  7. </div>
  8. ...
  9. </form>
  10. inside I want:
  11. <div class="form-group">
  12.                 <label class='login-label'>Username</label>
  13. <input id="login" class="form-control"></input>
  14. </div>
  15. <div class="form-group">
  16.                 <label class='password-label'>Password</label>
  17.                 <input id="password" class="form-control"></input>
  18. </div>
I was trying something like this (for login):
  1. $(document).ready( function() {
  2.       $( "#login" ).prepend( "<label class='login-label'>Username</label>" );
  3. });

Nothing displays in UI but this displays when I inspect in dev tools:
  1. <input id="login"name="login" placeholder="Username" class="form-control" >
  2.       <label class="login-label">Username</label>
  3. </input

Your help is appreciated - thanks!