Javascript – Creating an li element using a checkbox array but with two values per checkbox?

Alright so I have three checkboxes with the values of Profile, Online, and Storage. I can get all those pushed to an array when checked and I can get the li elements created per checked item.

The issue is that each of those items also has a second “value” being “+$1/mo”, “+$2/mo”, and “+$2/mo”.

Where I’m stuck is figuring out how to attach those second “values” to the first values so that when an item is checked, it creates an li element with one p element being the name value (i.e. Profile) and a second p element with the cost value (i.e. “+$2/mo”).

Here is the code for one of the inputs:

 <input
    id="profile-checkbox"
    type="checkbox"
    value="Custom profile"
    name="add-ons"
    onclick="getAddons()"
    class="w-5 h-5 mr-2 text-blue-600 bg-gray-100 border-light-gray rounded"
  />

The JS global variables

const addonsResultList = document.getElementById("add-ons-result-list");
let addonsResult = [];

The function to get the checkbox values

// Step 3, add-ons
function getAddons() {
    let checkboxes = document.getElementsByName("add-ons");

    addonsResult = [];

    for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            addonsResult.push(checkboxes[i].value);
        }
    }
}

And the function that adds everything to the results page:

function setResultsPage() {
addonsResult.forEach(function (addon) {
        const li = document.createElement("li");
        const pName = document.createElement("p");
        const pAmount = document.createElement("p");
        const text = document.createTextNode(addon);

        li.classList.add("flex", "justify-between");

        pName.appendChild(text);
        pName.classList.add("text-cool-gray", "text-sm");

        pAmount.appendChild();
        pAmount.classList.add("text-sm", "text-marine-blue");

        li.appendChild(pName);
        addonsResultList.appendChild(li);
    });
}

As of right now, I can successfully create an li element for which ever checkboxes were checked but only for the name. Getting the second “value” (amount) to be linked up with the correct first value (name) and added into the pAmount element is where I’m stuck.