plsql гиперссылка области динамического контента не работает

Question

Я работаю над динамическим контентом plsql для создания некоторых базовых элементов управления html, таких как <ul> и <li>. Я сталкиваюсь с проблемой на <li> при реализации гиперссылки на элемент списка.Проблема состоит в том, что, как только я запускаю код, он генерирует весь список, но гиперссылка работает только для первого элемента списка, и я хочу отправить параметры модальному диалогу, который открывается по <li> гиперссылке.

Вот мой код, какя генерирую элементы списка

FOR i IN WEEK LOOP
  htp.p('<h3>'||i.WEEK_NAME||'</h3>'); 
  FOR j IN DAYS (i.WEEK_ID) LOOP    
    htp.p('<div class="div">');
    htp.p('<h3>'||j.WEEK_DAY||'</h3>');
    htp.p('<ul class=menu>');
    htp.p('<br>');
    FOR k IN MEALS (j.DAY_ID,i.WEEK_ID)  LOOP   

            htp.p('<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal"></i>
                            </a>
                            <span>'||k.MEAL_NAME||'</span>
                        </li>');

    END LOOP;
    htp.p('</ul>');
    htp.p('</div>');
  END LOOP;
END LOOP;

    htp.p('</body>');
    htp.p('</html>');

Пожалуйста, укажите, что именно я делаю неправильно с гиперссылкой, которую гиперссылка включает только для самого первого элемента списка

Обновление

<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 1</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 2</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 3</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 1</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 2</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 3</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 1</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 2</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 3</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 1</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 2</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 3</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 1</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 2</span>
                        </li>
<li>
                            <a href="javascript:void(0);">
                                <i class="fa fa-plus" id = "modal" value="abc"></i>
                            </a>
                            <span>Meal 3</span>
                        </li>