Advice on how to key data into Mobile App's boxed space

Tester_at_work :

I am attempting to simulate inputting data into the following input field as per in the following screenshot:

The coding for the boxed input field is as following

<div class="input-group otp-container">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md backupcode" style="" id="code-razer-8" maxlength="1" autocomplete="off" aria-required="true" name="OtpInfo.coderazer8" value="" required="">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md" id="code-razer-1" maxlength="1" autocomplete="off" required="required" aria-required="true" name="OtpInfo.coderazer1" value="">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md" id="code-razer-2" maxlength="1" autocomplete="off" required="required" aria-required="true" name="OtpInfo.coderazer2" value="">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md" id="code-razer-3" maxlength="1" autocomplete="off" required="required" aria-required="true" name="OtpInfo.coderazer3" value="">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md" id="code-razer-4" maxlength="1" autocomplete="off" required="required" aria-required="true" name="OtpInfo.coderazer4" value="">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md" id="code-razer-5" maxlength="1" autocomplete="off" required="required" aria-required="true" name="OtpInfo.coderazer5" value="">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md" id="code-razer-6" maxlength="1" autocomplete="off" required="required" aria-required="true" name="OtpInfo.coderazer6" value="">
   <input type="tel" class="form-control form-input form-input--outline input-box-opt text-center text--md backupcode" style="" id="code-razer-7" maxlength="1" autocomplete="off" aria-required="true" name="OtpInfo.coderazer7" value="" required="">
</div>

I tried to send, for example, a line of integer "453678", these numbers are filled in the first box, instead of a number per box.

What I want to achieve is when I send the line of integer, it will AUTOMATICALLY fill each box with one integer.

At the moment, I use the following method to achieve the filling of each box with a single integer.

driver.findElement(By.xpath("//*[@id=\"code-razer-1\"]")).sendKeys(bkcd1);
System.out.println("the backupcode is : " + bkcd1);
Thread.sleep(2000);

driver.findElement(By.xpath("//*[@id=\"code-razer-2\"]")).sendKeys(bkcd2);
System.out.print("the backupcode is : " + bkcd2);
Thread.sleep(2000);

driver.findElement(By.xpath("//*[@id=\"code-razer-3\"]")).sendKeys(bkcd3);
System.out.print("the backupcode is : " + bkcd3);
Thread.sleep(2000);

driver.findElement(By.xpath("//*[@id=\"code-razer-4\"]")).sendKeys(bkcd4);
System.out.print("the backupcode is : " + bkcd4);
Thread.sleep(2000);

driver.findElement(By.xpath("//*[@id=\"code-razer-5\"]")).sendKeys(bkcd5);
System.out.print("the backupcode is : " + bkcd5);
Thread.sleep(2000);

driver.findElement(By.xpath("//*[@id=\"code-razer-6\"]")).sendKeys(bkcd6);
System.out.print("the backupcode is : " + bkcd6);
Thread.sleep(2000);

driver.findElement(By.xpath("//*[@id=\"code-razer-7\"]")).sendKeys(bkcd7);
System.out.print("the backupcode is : " + bkcd7);
Thread.sleep(2000);

driver.findElement(By.xpath("//*[@id=\"code-razer-8\"]")).sendKeys(bkcd8);
System.out.print("the backupcode is : " + bkcd8);
Thread.sleep(2000);

The above works, but I would like to reduce the line of codes.

NarendraR :

First, Store all your values which you need to fill into input boxes in a HashMap.

Map<Integer, String> testData = new HashMap<>();
testData.put(1, "332133");
testData.put(2, "332123");
testData.put(3, "332143");
testData.put(4, "332167");
.....

Locate the same types of input boxes and then iterate through the loop. Get the id attribute of each input box and check whether last character is a digit, if yes then get the corresponding digit value from HashMap and fill into the respective textbox.

List<WebElement> textBoxes = driver.findElements(By.cssSelector("input[id^='code-razer-']"));

for(WebElement element: textBoxes) {
    String id = element.getAttribute("id");
    char lastChar = id.charAt(id.length()-1);

    if(Character.isDigit(lastChar)) {
        element.sendKeys(testData.get(Character.getNumericValue(lastChar)));
    }else {
        // handle if element is different 
    }
    Thread.sleep(1000);
}