Add class to element based on input value length/state with JavaScript

I’m trying to create the ‘floating labels’ effect for my fields. However, I’m having difficulties because the HTML code is structured in such a way that prevents it from being achieved using only CSS as there is no way to use CSS combinators (>,+,~) and I do not have the ability to change the HTML code.

My code:

label {display: block; position: absolute; margin: 15px 0 0 12px; color: #606060; font-family: "Arial";}

input {display: block; padding: 15px 12px; border: 1px solid #bbb; border-radius: 5px; width: 300px;}

<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input" id="input" placeholder="">
   </span>
</p>

But I believe it would be possible if I was able to give the container a CSS class based on the field’s input/state. I would like to give the container the display-floating-label class if the value of the input is greater than 0 ( > 0 ). And maybe when the input is focused as well. Is that possible with JavaScript?

I’ve tried:

$(document).ready(function() {
  var formFields = $('.container');
  
  formFields.each(function() {
    var field = $(this);
    var input = field.find('input');
    var label = field.find('label');
    
    function checkInput() {
      var valueLength = input.val().length;
      
      if (valueLength > 0 ) {
        label.addClass('display-floating-label')
      } else {
            label.removeClass('display-floating-label')
      }
    }
    
    input.change(function() {
      checkInput()
    })
  });
});

But it didn’t work. I’m not very familiar with JavaScript so I would really appreciate if someone could help me out.

Here’s what I’m trying to achieve:

*I can not change the structure of the HTML code, I can only work with what I have.

Answer

Try the below snippet.

$(document).ready(function() {
  
    $('.input').each(function(){
        if( $(this).val() !='' ){
            $(this).closest('.container').addClass('display-floating-label');
        }
    });
  
    $('.input').on('input', function() {
    
        var valueLength = $(this).val().length;
      
        if (valueLength > 0 ) {
            $(this).closest('.container').addClass('display-floating-label');
        } else {
            $(this).closest('.container').removeClass('display-floating-label');
        }

    });
  
});

label {position: absolute;margin: 15px 0 0 12px;}
.display-floating-label label {position: absolute; margin: 10px 0 0 12px; color: #606060; font-family: "Arial";font-size:10px;}
input {display: block; padding: 18px 12px 12px 12px; border: 1px solid #bbb; border-radius: 5px; width: 300px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input" id="input" placeholder="">
   </span>
</p>
<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input2" id="input2" placeholder="" value="Prefill">
   </span>
</p>