如何按日期在 JSON 对象中添加动态创建的输入值？

Question

I am making a Event Booking system and i am trying to add input elements dynamically and adding their values on JSON object.
This my code (JQuery):

$(".add_button").click(function(){

// Finding total number of elements added
var total_element = $(".element").length;

// last <div> with element class id
var lastid = $(".element:last").attr("id");
var split_id = lastid.split("_");
var nextindex = Number(split_id[1]) + 1;
let eventDate = $("#eventDate").val();
let ticketDetails = $("#ticketDetails").val();
let noTickets = $("#noTickets").val();
let ticketPrice = $("#ticketPrice").val();

var max = 20;
// Check total number elements
if(total_element < max ){
 // Adding new div container after last occurance of element class
 $(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");

 // Adding element to <div>
 $("#div_" + nextindex).append(`
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="far fa-calendar-alt"></i>
                      </span>
                    </div>
                    <input type="text" name="eventDate" value="${eventDate}" class="form-control float-right reservation">
                    <input type="text" name="ticketDetails" value="${ticketDetails}" placeholder="Ticket Details" class="form-control float-right">
                    <input type="number" name="noTickets" value=${noTickets} placeholder="No. of tickets" class="form-control float-right">
                    <input type="number" name="ticketPrice" value=${ticketPrice} placeholder="Price" class="form-control float-right" id='txt_${nextindex}'>
                    &nbsp;<span id='remove_${nextindex}' class='remove btn btn-danger'>X</span>
                  </div><br>`);

}

});


// Remove element
$('.myList').on('click','.remove',function(){

var id = this.id;
var split_id = id.split("_");
var deleteindex = split_id[1];

// Remove <div> with id
$("#div_" + deleteindex).remove();

});

This is HTML Code:

<div class="form-group">
  <label>Event Days</label>
  <!--Some New Fields-->
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="far fa-calendar-alt"></i>
      </span>
    </div>
    <input type="text" class="form-control float-right reservation" id="eventDate">
  </div>
  <div class="input-group">
    <input type="text" placeholder="Ticket Details" class="form-control float-right" id="ticketDetails">
  </div>
  <div class="input-group">
    <input type="number" placeholder="No. of tickets" class="form-control float-right" id="noTickets">
  </div>
  <div class="input-group">
    <input type="number" placeholder="Price" class="form-control float-right" id="ticketPrice">
  </div>
  <!--Some more new Fields-->

  <!-- /.input group -->
  <br>
  <input type="button" class="btn btn-success btn-block add_button" value="Add New Day">
</div>

What i am doing is that i am taking values from the input fields with ID's(eventDate, ticketDetails, noTickets and ticketPrice) and using that to create new fields by using the value as default that is taken from the input above.
I am trying to make it so that when i select some date and can multiple (ticketDetails,noTickets and ticketPrice) on single eventDate.

What i want is something like this,

days:[{
    day: eventDate,
    typesOfTickets: [{
        ticketDetails: ticketDetails,
        noTickets: noTickets,
        ticketPrice: ticketPrice
    }]
}]

In this way if there are multiple types of ticket on the same day like for adult, children and student etc that can be allotted properly in the typesOfTickets array on the same day. so it might look like this forexample,

days:[
    {
    day: "12-12-2020",
    typesOfTickets: [{
        ticketDetails: "Adult Ticket",
        noTickets: 200,
        ticketPrice: 15
    },
    {
        ticketDetails: "Children Tickets",
        noTickets: 50,
        ticketPrice: 10
    }]
},
{
    day: "20-12-2020",
    typesOfTickets: [{
        ticketDetails: "Student Ticket",
        noTickets: 100,
        ticketPrice: 18
    }]
}]

Answer 1

Try this below:

        let day_obj = {};
        let day_exists = false;
        day_obj['typesOfTickets'] = [];
        days.map(function (item) {
            if (item.day == day) {
                day_exists = true;        
                item.typesOfTickets.push({
                ticketDetails: ticketDetails,
                noTickets: noTickets,
                ticketPrice: ticketPrice
              });
            }
        });
        if(!day_exists){
            day_obj['day'] = day;
            day_obj['typesOfTickets'].push({
            ticketDetails: ticketDetails,
            noTickets: noTickets,
            ticketPrice: ticketPrice
           });
         days.push(day_obj);
        }