I am trying to create a floating label where the label will go up when you click the input. But I am running into a problem where I am unable to call the class(the element) without affecting the other one. For example, I have 2 classes with the same class name, when I try to click on one of the other ones would work at the same time. I am trying to add an array, but as I have just started to learn JavaScript I do not know how to do it properly. 

```js
const floatinput = document.getElementsByClassName('entry-form-input');
const floatlabel = document.getElementsByClassName("tryingtoanimatelabel");

function forgetmove() {
  floatlabel[0].classList.add("myanimatelabel");
}

function removemove() {
  if (floatinput[0].value === "") {
    floatlabel[0].classList.remove("myanimatelabel");
  } else {
    floatlabel[0].classList.add("myanimatelabel");
  }
}

```

```html
<div className="tryingtoanimate-container" onClick={forgetmove} onBlur={removemove}>
  <input type="text" className="entry-form-input forgetinput" name="TeamName"/>
  <label className="tryingtoanimatelabel">Team Name</label>
</div>

<div className="tryingtoanimate-container" onClick={forgetmove} onBlur={removemove}>
  <input type="text" className="entry-form-input forgetinput" name="TeamName" onChange={this.handelChange}/>
  <label className="tryingtoanimatelabel">Team Name</label>
</div>

```