Добавить дополнительную задачу поля ⇐ Jquery

[Anonymous]

Я работаю над этой страницей, где у меня есть специальный JS/jQuery для добавления функции поиска по списку. При необходимости мне нужно иметь возможность «добавить» поле. У меня это работало до того, как я реализовал функцию поиска, но теперь это стало намного более запутанным. Я думаю, мне нужно использовать "ближайший" или "каждый" где-нибудь здесь
вот скрипка

Код: Выделить всё

$(function() {
let count = 1;
$("#addMore").click(function(e) {
count++;
var newChargeGroup = $("#chargeGroup1").clone().attr({
id: "chargeGroup" + parseInt(count),
name: "charge" + parseInt(count)
});
newChargeGroup.val("");
$("#chargeGroups").append(newChargeGroup);
});

document.getElementById("addMore").addEventListener("click", function(event) {
event.preventDefault()
});

$(document).ready(function() {
$('#dropdownDisplay').on('click', function() {
$('#dropdownContent').toggle();
});

$('#chargeSearch' + parseInt(count)).on('input', function() {
let value = $(this).val().toLowerCase();
$('#charge li').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});

/* $('.charge').on('click', 'li', function (e) {
//$(e.target).closest('span').text($(this).text());
$('#dropdownDisplay > span').text($(this).text());
$('#hiddenCharge').val($(this).text());
$('#dropdownContent').hide();
});*/
$('.charge').on('click', 'li', function(e) {
//$(e.target).closest('span').text($(this).text());
$('#dropdownDisplay > span').text($(this).text());
$('#hiddenCharge').val($(this).text());
$('#dropdownContent').hide();
});

$(document).on('click', function(e) {
if (!$(e.target).closest('.search-dropdown').length) {
$('#dropdownContent').hide();
} else {
$("#chargeSearch1").focus();
}

});
});

// populate charges
const chargeSelect = document.getElementById("charge");
for (let state in myCharges) {
let opt = document.createElement('li');
opt.innerHTML = state;
chargeSelect.appendChild(opt);
}

});

const myCharges = {
"this charge": "",
"second charge": "",
"third charge": "",
};

Код: Выделить всё

form .group {
display: table;
width: 100%;
}

form p.group label,
form div.group label {
display: table-cell;
width: 20%;
}

form p.group input,
form p.group select {
/* display: table-cell; */
width: 100%;
}

.terms-section {
width: 100%;
max-width: 400px;
margin: 0 auto 1em;
}

#selectCharges>select {}

#addMore {
margin: auto auto 1em;
display: table-cell;
text-align: center;
}

#termsCheck {
cursor: pointer;
}

#scrollable {
border: solid 1px;
height: 100px;
margin: 1em auto;
padding: 10px;
overflow-y: scroll;
}

.close {
position: absolute;
color: #fff;
top: 0;
right: 0;
padding: 2px 10px;
margin: 5px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50px;
cursor: pointer;
}

#popup {
display: none;
font-size: 1em;
position: absolute;
top: 0;
width: 80%;
max-width: 400px;
height: 20em;
padding: 20px;
margin: auto;
border: 1px solid;
background: #eee;
overflow-y: scroll;
z-index: 101;
}

#mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
z-index: 100;
}

.search-dropdown {
margin-bottom: 1em;
}

.dropdown-display {
/* width: 75%; */
/* display: table-cell; */
padding: 0 6px 1px;
border: 1px solid #bbb;
cursor: pointer;
}

.dropdown-content {
display: none;
}

.dropdown-content .search-input {
display: table-cell;
width: 100%;
margin: 1em 5% 0 0;
}

.dropdown-content ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
padding-top: 1em;
width: 100%;
}

.dropdown-content ul li {
padding: 0 10px;
cursor: pointer;
border: 1px solid #bbb;
/* display: table-header-group;  */
}

.dropdown-content ul li:not(:first-child) {
border-top: 0;
}

.dropdown-content ul li:hover {
background-color: #f1f1f1;
}

Код: Выделить всё

Charges: 


Select Charge



[list]

[/list]




Add Charge

Изменить:
Я хочу сделать следующее: кнопка «Добавить дополнительную плату» дублируется при нажатии. В нем идентификатор раскрывающегося списка/поля ввода будет одинаковым. В настоящее время после выбора платежа этот текст будет помещен в скрытое поле ввода. Для отправки данных мне нужно иметь несколько полей расходов.

Подробнее здесь: https://stackoverflow.com/questions/786 ... ield-issue