Selecting multiple check boxes is not working in Puppeteer headless browser

In the below code,I am using headless browser to https://example.com/careers site and select two checkboxes and exctract the resulted data. But the problem here is only the first checkbox (technologycheckbox) is getting selected but other one (locationcheckbox) is not getting selected. Please help

(async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  await page.setViewport({ width: 1366, height: 768});
  await page.goto('https://example.com/careers' ,{waitUntil: 'networkidle2'});
  await page.waitFor(4000);

    const technologycheckbox = await page.$('#checkbox2idvalue');
    await page.waitFor(2000);
    page.waitForSelector(locationcheckbox);
    await technologycheckbox.click();
    await page.waitFor(15000);
    const locationcheckbox  = await page.$('#checkbox1idvalue');
    await locationcheckbox.click();
    await page.waitFor(9000);



const result = await page.evaluate(() => {


    let data = []; // Create an empty array that will store our data
    let elements = document.querySelectorAll("div>ul> li >div:nth-child(1)"); // Select all Products
    console.log(elements)

    for (var element of elements){ // Loop through each proudct

        let title = element.textContent;
        let url = element.href; // Select the title


        data.push({title, url}); // Push an object with the data onto our array
    }

    return data; // Return our data array

});

});