Generate a line of HTML code matching a checked checkbox

Hello I am here today because I'm a bit out my depth with JavaScript and PHP but I need a way to do this to finish my project. So what I'm aiming to do is to 'innerHTML' a line of code for every checked checkbox, I currently have a long list of PHP arrays for each of the checkboxs.

PHP

array(
    "number" => "4",
    "title"  => "BABYBEL"
),

Now I want to take that title in that array depending on the checked checkbox, so for a example the checkboxs id is c4 so

document.getElementById(id) = c4

I want to turn that into a line of code like

 <div class="size">BABYBEL</div>

JavaScript

var displayElement = document.getElementById('display'),
    displayTotalElement = document.getElementById('displayTotal');

function findTotal() {
    var items = [],
    itemCount = document.getElementsByClassName("items"),
    total = 0,
    id = '';

    // clear container
    displayElement.innerHTML = "";

    for (var i = 0; i < itemCount.length; i++) {
        id = "c" + (i + 1);
        var element = document.getElementById(id),
            elementsParent = element.parentNode;
        if (element.checked) {
            total = total + parseInt(element.value, 10);
            elementsParent.classList.add("active");
            elementsParent.classList.remove("hover");
            *** add here? ***
        } else {
            elementsParent.classList.remove("active");
            elementsParent.classList.add("hover");
        }
    }
    console.log(total);
    displayTotalElement.value = total;
}

and one checkbox HTML code

HTML

<label class="hover topping" for="c4">
<input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c4">BABYBEL</label>

Please could I note as well about how my JavaScript goes through all of the checkboxs each time meaning it may cause duplicates.