Selenium - How to send input from div > input by id?

So I am having an issue where I am trying to input a text to a input field but I realized that there is two same id by the same id name and I am here looking for help on how to specifiy which div -> input I would like to use.

What I did so far was:

it('Entering First Name', function (done) {

    browser.driver
        .then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[@id="pp-cc-first-name-field"]'))), 50000, "Timed out finding 'First Name' element"))
        .then(() => element(by.xpath('//input[@id="pp-cc-first-name-field"]')).sendKeys("hello world")
        .then(() => done());
});

with using this HTML

So I am not sure what I am actually doing wrong in this case because right now it doesn't input anything and fails due to time out. I would like to wish to input any text to this specific element.

EDIT!

It looked like I had to switch to iframe due to there is a iframe loaded on the background which was the reason I wasn't able to actually write on the field. I had to use

browser.switchTo().frame(element(by.xpath("//iframe[@id='cc-integrated-payment-page-frame']")).getWebElement()))

to be able to write inside the fields.