Javascript-форум - Заполнение поля input text при отметке checkbox через запятую

Подскажите пожалуйста как изменить код чтоб при отметке checkbox его значение передавалось в поле input text и result с добавлением текста "Выбрано" предлога "и" и запятой в зависимости от количества отмечанных checkbox?

При отметке одного checkbox: "Выбрано value 2"
При отметке двух checkbox: "Выбрано value 1 и value 2"
При отметке трех checkbox: "Выбрано value 2, value 3 и value 4"
При отметке четырех checkbox: "Выбрано value 1, value 2, value 3 и value 4"
и тд...

<div>
    <input type="checkbox" id="checkbox_1" class="protection checkbox" value="value 1">
    <input type="checkbox" id="checkbox_2" class="protection checkbox" value="value 2">
    <input type="checkbox" id="checkbox_3" class="protection checkbox" value="value 3">
    <input type="checkbox" id="checkbox_4" class="protection checkbox" value="value 4">
    <input type="checkbox" id="checkbox_5" class="protection checkbox" value="value 5">
</div>
<div>
    <input type="text" id="txttown" class="form-control" name="txttown">
    <div class="result"></div>							
</div>
<script>
    var chex = document.querySelectorAll(".protection"),
         artikul = document.getElementById('txttown');
    for(var i = 0; i<chex.length;i++) {
        chex[i].onchange = function () {
             this.checked ? artikul.value += this.value : artikul.value = artikul.value.replace(this.value,"") ;
        }
    }
</script>

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <script> document.addEventListener("DOMContentLoaded", function() { let div = document.querySelector(".check"), artikul = document.getElementById('txttown'), result = document.querySelector(".result"); div.addEventListener("change", function() { let arr = Array.from(div.querySelectorAll(".protection:checked"), ({ value }) => value); if (arr.length > 1) { arr[arr.length - 2] += ` и ${arr.pop()}` }; artikul.value = result.textContent = arr.length ? `Выбрано ${arr}` : ''; }) }) </script> </head> <body> <div class="check"> <input type="checkbox" id="checkbox_1" class="protection checkbox" value="value 1"> <input type="checkbox" id="checkbox_2" class="protection checkbox" value="value 2"> <input type="checkbox" id="checkbox_3" class="protection checkbox" value="value 3"> <input type="checkbox" id="checkbox_4" class="protection checkbox" value="value 4"> <input type="checkbox" id="checkbox_5" class="protection checkbox" value="value 5"> </div> <div> <input type="text" id="txttown" class="form-control" name="txttown" size="50"> <div class="result"></div> </div> </body> </html>