Why doesn't jQuery's click event fire a second time?

Question

JavaScript

There is an event which, by clicking on the button, adds HTML code to the page.

$(document).ready(function(){
  $('.add').on('click', function() {
  event.preventDefault();
  var i = $('.input_selection').length + 1;
  if (i<6) {
  $('<div class="input_selection"><input type="text" name="amount' + i + '" id="amount' + i + '" placeholder="Количество"><div class="wrapper_select"><select name="type_cargo' + i + '" id="type_cargo' + i + '"><option>Вид груза</option><option value="Документы | 0.1 кг">Документы | 0.1 кг</option><option value="Груз | > 1 кг">Груз | > 1 кг</option><option value="Груз | < 1 кг">Груз | < 1 кг</option></select></div><input type="text" name="length' + i + '" id="length' + i + '" placeholder="Длина, см"><input type="text" name="width' + i + '" id="width' + i + '" placeholder="Ширина, см"><input type="text" name="height' + i + '" id="height' + i + '" placeholder="Высота, см"><input type="text" name="weight' + i + '" id="weight' + i + '" placeholder="Вес, кг">').appendTo('.two_section');}
  return false;
  });
});

<div class="two_section">
              <label for="amount">Посылки:</label>
              <div class="input_selection">
                <input type="text" name="amount1" id="amount1" placeholder="Количество">
                <div class="wrapper_select">
                  <select name="type_cargo1" id="type_cargo1">
                    <option>Вид груза</option>
                    <option value="Документы | 0.1 кг">Документы | 0.1 кг</option>
                    <option value="Груз | > 1 кг">Груз | > 1 кг</option>
                    <option value="Груз | < 1 кг">Груз | < 1 кг</option>
                  </select>
                </div>
                <input type="text" name="length1" id="length1" placeholder="Длина, см">
                <input type="text" name="width1" id="width1" placeholder="Ширина, см">
                <input type="text" name="height1" id="height1" placeholder="Высота, см">
                <input type="text" name="weight1" id="weight1" placeholder="Вес, кг">
              </div>

            
            </div>
            <div class="three_section">
              <div class="add_pos">
                <button class="add" type="button">Добавить посылку</button>
              </div>
            </div>

The event is triggered when the button is clicked for the first, third, fourth time. But it doesn't work when pressed a second time. Tell me why is this happening?

Answer 1

Everything works, the problem is elsewhere.
https://jsfiddle.net/oujrwn4y/