Добрый день,есть несколько чекбоксов,задача состоит в том,чтобы при клике на чекбокс ниже создавался div-блок с названием соответствующим отмеченному чекбоксу. Попытался сделать,при клике по одному чекбоксу создается строка как положено,но если кликаешь по второму,то создается еще 2 строки, т.е по строке за каждый отмеченный чекбокс,подскажите,пожалуйста,что не так делаю? Так же,если отключаем чекбокс,то строка должна удаляться.
$(".option-item input").on("change", function(){
addCheckOption();
});
function addCheckOption() {
$(".option-item input").each(function () {
var optionTitle = $(this).data('name');
var optionList = document.getElementById('check-option-block');
var optionItem = document.createElement('div');
var optionNameBlock = document.createElement('div');
var optionName = document.createTextNode(optionTitle);
optionNameBlock.className = 'option-name-block col-sm-9 col-xs-12 ';
optionItem.className = 'option-block-row row';
if ($(this).is(":checked")) {
optionNameBlock.appendChild(optionName);
optionItem.appendChild(optionNameBlock);
optionList.appendChild(optionItem);
} else {
$(optionItem).remove();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="option-item">
<input type="checkbox" id="check1" data-name='Питер'/>
<label for="check1"><span></span><strong id='test'>Питер</strong></label>
</div>
<div class="option-item">
<input type="checkbox" id="check2" data-name='Москва'/>
<label for="check2"><span></span><strong>Москва</strong></label>
</div>
<div id="check-option-block"></div>