Есть ли способ изменить элемент списка в зависимости от идентификатора его div?

Ладно, это дополнительное программное обеспечение для моего маленького проекта, в основном у меня есть огромный div с маленькими div'ами внутри:

<div class="scroll-area" id="lista">

        <div class="box" id="item1">
            <p>Item #1</p>
            <p class="info"><a href="#" id="lnkInfo">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item2">
            <p>Item #2</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Reservar</p></a>
        </div>

        <div class="box" id="item3">
            <p>Item #3</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item4">
            <p>Lab #4</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item5">
            <p>Item #5</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>

        <div class="box" id="item6">
            <p>Item #6</p>
            <p class="info"><a href="#">Info</p></a>
            <p class="info"><a href="#">Take</p></a>
        </div>
               </div>

PopUp для элемента:

 <div class="popUp hide" id="popUp">
        <div class="stylePopUp">
          <span>Info</span>
          <span value="Close" id="btnClose">x</span>
        </div>
            <ul>
        <li>Nome: Item #1</li> !-- Here is where I want to replace -->
            <li>BLA</li> 
        <li>BLA</li>
        <li>BLA</li>
    </ul>



        </div>  

CSS

.box {
   display: inline-block;
   padding: 2px;
   width: 75px;
   border: 2px solid black;
   margin: 3px;
}


.box:hover{
border:2px solid #e67e22;
}

Javascript:

var elementInfo = document.getElementById('lnkInfo'),
elementBtnClose = document.getElementById('btnClose'); 

elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrect');
});

elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrect');
});

function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}

function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';
}

Но это просто пример того, как он выглядит. Теперь, когда я нажимаю "Информация", он отображает popUp с некоторой информацией (go figure), в которой говорится:

Имя: Пункт X

Я не хочу делать div для каждого элемента, поэтому я хотел бы выполнить какое-то esque-решение Java, например:

String name = "Item:" + x. Где x - это имя или номер элемента, который программа должна автоматически извлекать, когда я нажимаю на указанный div. Проблема в том, что сначала я не знаю точного sintax для Javascript, а также точного способа, как я этого хочу.

Я думал в каком-то цикле, который сравнивает идентификатор каждого div, и когда он выбран, он присваивает значение "Name:" X, но все же мой ограниченный опыт кричит, что для этого мне понадобится какой-то i++, иначе как я должен назначить int или строку?

Извините, если я потерял линию мысли, английский не является моим основным языком, и я расстроен, как когда у вас есть слово на кончике вашего языка>. <У меня есть идея, как это сделать...

Любая помощь будет оценена с наилучшими пожеланиями!