ProtractorJS ElementNotVisableError: Element is not currently visable

I have a field that appends users input into a LI , and am writing tests for multiple additions.

(sorry it's in coffee)

When -> element(By.cssContainingText( 'option', 'foo' )).click()
When -> foo_page.set_data 'hello'
When -> foo_page.set_option 'ipsum'
When -> element(By.buttonText( 'Add Opt' )).click()
When -> element(By.buttonText( 'Add data' )).click()
When -> foo_page.set_data 'loremIpsum'
When -> element(By.cssContainingText('option', 'foo' )).click()
When -> new_page.set_option 'ipsum'
# I'm almost sure it's the line beneath this causing the errors
When -> element( By.buttonText ( 'Add Opt' )).click()
When -> element( By.buttonText ( 'Add data' )).click()
  Then -> expect ( element.all (By.css( '.custom_datafields li' )).count()).toBe(2)

Through commenting lines out, I'm almost positive it's the second Add Opt .click that it's not liking. What I'm trying to do is just test if I can add the same thing multiple times.