jQuery calculator with data loading via json?

Question

PHP

There is a calculator code that takes data from a PHP array (using JSON). The array is accessed through the id of the inputs. In the Admin panel there is a table of correspondence of active IDs to a certain price. By clicking on the "plus" with the class ".click" I add a new line of inputs. How to make sure that the same rules are applied to the added input line as for the rest of the inputs (the necessary price is loaded from the admin panel)?
Site with calculator code: http://mktester4.tk/prices/ ("calculate price")
Calculator code:

$(".click").hide();
  $(".zone-item input:checkbox").click(function () {
var zoneItem = $(this).closest(".zone-item");
zoneItem.toggleClass("activated");
zoneItem.children(".js-form-controls").slideToggle("fast");
$(".click").show();

if (zoneItem.hasClass("activated")) {
    var zoneItemId = $(this).closest(".zone-item").attr("id");
    $("#" + zoneItemId + " .age-selector").change(function () {
        var ageItem = $("option:selected", this).attr("value");
        $("#" + zoneItemId + " .age-selector-value").each(function(){
            $(this).html(ageItem);
        });
    });
    $("#" + zoneItemId + " .time-selector").change(function () {
        var timeItem = $("option:selected", this).attr("value");
        $("#" + zoneItemId + " .time-selector-value").each(function(){
            $(this).html(timeItem);
        });
    });
    $("#" + zoneItemId + " .number-selector").change(function () {
        var peopleCount = $(this).attr("value");
        $("#" + zoneItemId + " .people-selector-value").each(function(){
            $(this).html(peopleCount);
        });
    });
    //createNewRow
    $(this).closest(".zone-item").delegate( ".click", "click", function() {
        var additionalInputs = $("#" + zoneItemId + " .js-form-controls").html();
        $(this).closest(".zone-item").after( "<div class='js-form-controls'>"+ additionalInputs +"</div>" );
    });


    $("#" + zoneItemId + " .form-control").change(function() {
        $("span.age-selector-value, span.time-selector-value, span.price-for-zone").css("display", "none");
        var finalAge = $("#" + zoneItemId + " .age-selector-value") .html();
        var finalTime = $("#" + zoneItemId + " .time-selector-value").html();
        var finalPeopleCount = $("#" + zoneItemId + " .people-selector-value").html();
        var zonePrice= $("#" + zoneItemId + " .price-for-zone");

        zonePrice.html(window.prices[zoneItemId][finalTime][finalAge]);

        var sum=0;
        var multipliedPrice = $("#" + zoneItemId + " .price-for-zone").html() * finalPeopleCount;
        $("#" + zoneItemId + " .multiplied-price-for-zone").html(multipliedPrice);

        $(".multiplied-price-for-zone").each(function(){
            sum += Number($(this).html());
        });
        $(".js-final-price").html(sum);
    });
}

else {
    var zoneItemId = $(this).closest(".zone-item").attr("id");
    var finalPeopleCount = $(".people-selector-value").html();
    $("#" + zoneItemId + " .price-for-zone").html(0);
    $("#" + zoneItemId + " .people-selector-value").html(1);
    $("#" + zoneItemId + " .number-selector").val(1);
    $("#" + zoneItemId + " select").val('default');
    var sum=0;
    $(".price-for-zone").each(function(){
        sum += Number($(this).html()*finalPeopleCount);
    });
    $(".js-final-price").html(sum);
    }
   });

Answer 1

You put a change event handler on the select inside an element with the zone-item class, and add a new div with the js-form-controls class (containing the new inputs) not inside the .zone-item, but after it.
But if you answer a question cut out of context
then you should use .on() .
PS Apply id, consisting only of the number 0, 1, 2, ... - not the best practice.