I'm trying to toggle the text in a button every time it's clicked, between "READ" and "NOT READ". The buttons have been created dynamically with js and placed into an HTML table. Each button has a unique ID, but the same class name. 

I've written an if statement that works for the first button that is set in the table, but the same if statement wont work for the buttons created dynamically.

I've tried lots of different variations for the if statements. I'm not sure if the best way would be to access the unique id's, but I don't know how to do that.
Any help is appreciated! Thanks

Here's a repl <https://repl.it/repls/SpryVisibleMining>

```
function toggleText(){
     if (readButton.innerHTML == "READ"){
        readButton.innerHTML = "NOT READ";
        } else if (readButton.innerHTML == "NOT READ"){
        readButton.innerHTML = "READ";
        } else {
        null
        }
        }

```

And this is if statement that wont wont do anything

```
function toggleOthers() {
    let toggle = document.getElementsByClassName(".readBtn")

    toggle[0].addEventListener("click", () => {

        if (toggle.innerHTML == "READ") {
            toggle.innerHTML = "NOT READ"
        } else if (toggle.innerHTML == "NOT READ") {
            toggle.innerHTML = "READ"
        } else {
            null
        }
    })
}

toggleOthers()

```