Динамическое изменение идентификатора в модальном окне jQuery и jqueryUI

У меня есть общая кнопка Add Entry и список из 15 <li> элементов, скажем, 1,2,3 upto 15. SO, когда я нажимаю 1, кнопке назначается id button_1, аналогично для 2, 3, до 15.

Теперь у меня разные модальные поля для разных элементов списка. При нажатии на эту общую кнопку " Add Entry открывается модальный блок, соответствующий выбранному элементу списка.

Существует глобальная переменная, которую я установил в javascript как add_entry_button_id = 1. Выбрав любой элемент <li>, я обновляю эту переменную.

И после нажатия на кнопку я делаю это.

Html:

<button id="1_button" class="btn btn-primary pull-right add_entry_button" style="margin-bottom:10px" onclick="add_new_entry_button(add_entry_button_id)">Add New Entry</button>

Это мой код для открытия конкретного модального окна

JavaScript:

function add_new_entry_button(button_id){
    console.log(button_id)  // shows the current button_id
    $( "#"+button_id+"_button" ).click(function() {
        $( "#"+button_id+"_form" ).dialog( "open" );
        console.log(button_id)  // shows all the button_ids that i've traversed
    });
}

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

Например: - Если я нажму 1 а затем добавлю кнопку, откроется модальное поле для этого. Затем я нажимаю кнопку " 3 и добавляю кнопку, модальная коробка для 3 будет открыта, а затем откроется 1 модальный ящик.

Аналогично, если я нажму 7 и добавлю кнопку, модальный ящик для 7 откроется, а затем 3 модальных блока, а затем 1 модальный ящик также откроется.