Develop Reference

How can I use the same string created by password-generator in different places?

So I am stuck here where I need to use the value generated by generatePass() function. I need to obtain the same value of witPass in newPass to the same variable used in witclick() function.But I get different values because the generatePass function is called again generating a different random value.
I hope I am clear in explaining my issue since it's my first question.
```loginFunctions.js```
var passwordHolder = document.querySelector('#passwordholder);
var password;
var witPass;
witPass=password=generatePass();
//newPass is invoked when generatePassword button is clicked
function newPass() {
passwordHolder.textContent = password;
console.log(password);
console.log(witPass);
return witPass;
}
//function to generate random password
function generatePass() {
var length = 8,
charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
retVal = "";
for (var i = 0, n = charset.length; i < length; ++i) {
retVal += charset.charAt(Math.floor(Math.random() * n));
}
//witPass1=retVal;
return retVal;
}
//witness login button click event
function witclick() {
console.log('witclick invoked');
witnessEmail = document.getElementById('witnessEmail').value;
witnessPassword = document.getElementById('witnessPassword').value;
console.log(witnessPassword);
console.log(witPass);
}
index.html
<!--send mail to witness by admin -->
<div id="sendMail" class="container mt-4">
<div class="row">
<div class="col m-3">
<form class="border border-dark rounded bg-dark text-light">
<div class="form-group px-2">
<label for="email">Email address</label>
<input id="mailid" type="email" id="email" class="form-control" placeholder="Enter email">
<small class="form-text text-muted ">Enter a Valid Email Address</small>
</div>
<strong><p id="passwordHolder">Password</p></strong>
<button id="sendCred" class="btn btn-danger p-2 m-2" type="button">send cred</button>
<button id="generatePassword" onclick="newPass()" class="btn btn-danger p-2 m-2" type="button">Generate Password</button>
<button id="backToButtons" class="btn btn-danger p-2 m-2" type="button">Back</button>
</form>
</div>
</div>
</div>
<!-- witness login form-->
<div id="witnessForm" class="col-md-6 m-2 ">
<form action="" class="border border-dark rounded bg-dark text-light">
<!-- <div class="form-group px-2">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" placeholder="Enter name">
</div> -->
<div class="form-group px-2">
<label for="email">Email address</label>
<input type="email" id="witnessEmail" class="form-control" placeholder="Enter email">
<small class="form-text text-muted ">Enter a Valid Email Address</small>
</div>
<div class="form-group px-2">
<label for="password">Password</label>
<input type="password" id="witnessPassword" class="form-control" placeholder="Password">
</div>
<button id="witnessFormLogin" onclick="witclick()" class="btn btn-danger p-2 m-2" type="button">Login</button>
</form>
</div>

How to prevent adding double input with onclick button

Hi guys so when I try to add a question and answers this code works. But if I have made 2 questions and want to add a answer it will put an extra "answer" field in BOTH of the question. But ofcourse I only want to add an answer field to the "question" button i clicked on
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer()">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer() {
answer++;
var allanswers = document.getElementById('all_answers')
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>
If something is unclear I will try to explain it.
Please dont be to harsh I am pretty new to javascript...

All you needed to do was specify in your questions container an ID for where to put your answers in your add answer function i just used the question increment as an id and added that to the <div id="all_answers_${id}"> id and passed the id in the click function onclick="add_answer(${id})".
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
var id = question;
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers_${id}">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer(${id})">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer(id) {
answer++;
var allanswers = document.getElementById('all_answers_'+id)
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>

Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions

Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored
I have tried .on() .live() .submit() functions but get the same result. My php file consists of a print_r($_POST); and nothing else this is put into the console.
https://pastebin.com/CuAPSzKe - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.
This is the code to make the call:
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
console.log(data);
}
});
});
My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.

It is having a major issue due to the way your html is arbitrarily structured and you are missing a end div tag for your item information container. Fix these issues and it will run. You also may want to go ahead and start your first item information with a start of 0 and set your counter to 1 so it is easier to aparse on the backend once you recieve the info.
Move your form tag under your first container:
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
End tag
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</form>
</div>
Full example of cleaned up code running:
function test() {
var billName = document.getElementById('bill_name');
var shipName = document.getElementById('ship_name');
var billLine1 = document.getElementById('bill_line_1');
var shipLine1 = document.getElementById('ship_line_1');
var billLine2 = document.getElementById('bill_line_2');
var shipLine2 = document.getElementById('ship_line_2');
var billLine3 = document.getElementById('bill_line_3');
var shipLine3 = document.getElementById('ship_line_3');
var billLine4 = document.getElementById('bill_line_4');
var shipLine4 = document.getElementById('ship_line_4');
var billCounty = document.getElementById('bill_county');
var shipCounty = document.getElementById('ship_county');
var billPostcode = document.getElementById('bill_post');
var shipPostcode = document.getElementById('ship_post');
var billTele = document.getElementById('bill_telephone');
var shipTele = document.getElementById('ship_telephone');
var billEmail = document.getElementById('bill_email');
var shipEmail = document.getElementById('ship_email');
shipName.value = billName.value;
shipLine1.value = billLine1.value;
shipLine2.value = billLine2.value;
shipLine3.value = billLine3.value;
shipLine4.value = billLine4.value;
shipCounty.value = billCounty.value;
shipPostcode.value = billPostcode.value;
shipTele.value = billTele.value;
shipEmail.value = billEmail.value;
}
$('input#submitButton').on('click', function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $('form#orderForm');
var url = form.attr('action');
var test = form.serialize();
alert(test);
});
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td> <input type="text" class="form-control" name="sku' + counter + '" /></td> ';
cols += '<td> <input type="text" class="form-control" name="quantity' + counter + '" /></td> ';
cols += ' <td> <input type="text" class="form-control" name="price' + counter + '" /></td>';
cols += ' <td> <input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<form id="orderForm" method="POST" action="test.php">
<h2>Address Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="bill_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Name</div>
</div>
<input id="bill_name" name="bill_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 1</div>
</div>
<input id="bill_line_1" name="bill_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 2</div>
</div>
<input id="bill_line_2" name="bill_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 3</div>
</div>
<input id="bill_line_3" name="bill_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Line 4</div>
</div>
<input id="bill_line_4" name="bill_line_4" type="text" aria-describedby="bill_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="bill_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="bill_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing County</div>
</div>
<input id="bill_county" name="bill_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Postcode</div>
</div>
<input id="bill_post" name="bill_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Telephone Number</div>
</div>
<input id="bill_telephone" name="bill_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="bill_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Billing Email Address</div>
</div>
<input id="bill_email" name="bill_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="ship_name"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Name</div>
</div>
<input id="ship_name" name="ship_name" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_1"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 1</div>
</div>
<input id="ship_line_1" name="ship_line_1" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_2"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 2</div>
</div>
<input id="ship_line_2" name="ship_line_2" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_3"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 3</div>
</div>
<input id="ship_line_3" name="ship_line_3" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_line_4"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Line 4</div>
</div>
<input id="ship_line_4" name="ship_line_4" type="text" aria-describedby="ship_line_4HelpBlock" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-building-o"></i>
</div>
</div>
</div>
<span id="ship_line_4HelpBlock" class="form-text text-muted">(Not always Needed)</span>
</div>
<div class="form-group">
<label for="ship_county"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping County</div>
</div>
<input id="ship_county" name="ship_county" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-globe"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_post"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Postcode</div>
</div>
<input id="ship_post" name="ship_post" type="text" required="required" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-area-chart"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_telephone"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Telephone Number</div>
</div>
<input id="ship_telephone" name="ship_telephone" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-phone"></i>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="ship_email"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Shipping Email Address</div>
</div>
<input id="ship_email" name="ship_email" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-tablet"></i>
</div>
</div>
</div>
</div>
<button type="button" onclick="test()" class="btn btn-primary pull-right"><i class="fa fa-copy"></i></button>
</div>
</div>
<br>
<div class="container">
<h2>Extra Information</h2>
<div class="row">
<div class="col-6">
<div class="form-group row">
<label for="ship_method" class="col-5 col-form-label">Shipping Method</label>
<div class="col-7">
<div class="input-group">
<input id="ship_method" name="ship_method" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-anchor"></i>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="extra_shipping" class="col-5 col-form-label">Extra Shipping</label>
<div class="col-7">
<div class="input-group">
<input id="extra_shipping" name="extra_shipping" type="text" class="form-control" aria-describedby="extra_shippingHelpBlock">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-money"></i>
</div>
</div>
</div>
<span id="extra_shippingHelpBlock" class="form-text text-muted">(Leave Blank For Free Shipping)</span>
</div>
</div>
<div class="form-group row">
<label for="mage_order_number" class="col-5 col-form-label">Magento Order Number</label>
<div class="col-7">
<div class="input-group">
<input id="mage_order_number" name="mage_order_number" type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="container">
<h2>Item Information</h2>
<div class="row">
<div class="col-12">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>SKU</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="sku" class="form-control" />
</td>
<td>
<input type="number" name="quantity" class="form-control" />
</td>
<td>
<input type="number" name="price" class="form-control" />
</td>
<td>
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

how to insert dynamically cloned form into database together with other data using ajax

i cloned some part of my checkout based on user input, i want to insert it with other data into database. this is my html checkout. Class eventdetail is the cloned part. it is shown at id eventdisplay. How can i insert this cloned part together with other parts using ajax into my database?
This is the jquery; i also want to check if all fields are filled but sending it to eventdetail.php.
$("#book").click(function() {
var data = {
totalamount: $('#etamt').val(),
venue: $('#cvenue').val(),
//de: document.getElementById('des').innerHTML,
oname:$('#coname').val(),
// name: document.getElementById('ctitle').innerHTML,
frdate: $('#cedate').val(),
todate: $('#ctodate').val(),
// byno: $('#buynumber').val(),
// byemail: $('#buymail').val(),
// byname: $('#buyname').val(),
num: $('#etqty').val(),
}
$.ajax({
async: true,
url: "eventdetail.php",
method: "POST",
data: $(data).serialize(),
// $('.eventdetail').serialize(),
success: function(rt) {
}
});
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "col-12">
<div class= "row">
<div class= "col-6">
<div class="form-group border-dark">
<label><strong>Info: TEST</strong></label><br>
<input id="cinfo" value="TEST" type = "hidden"><br>
</div>
</div>
<div class= "col-6">
<div class="form-group border-dark">
<label><strong>Organized by: Jochuks </strong></label><br>
<input id="coname" value="Jochuks" type = "hidden"><br>
</div>
</div>
</div>
<div class="form-group border-dark" id="datediv">
<label><strong>Date and Time:</strong></label><br>
<label><strong>From: 5th June 2019</strong></label>
<input id="cedate" value="5th June 2019" type = "hidden"><br>
<label><strong>To: 23rd June 2019</strong></label>
<input id="ctodate" value="23rd June 2019" type = "hidden"><br>
</div>
<div class="form-group border-dark" id="vendiv">
<label><strong>Venue: StackOver</strong></label><br>
<input id="cvenue" value="StackOver" type = "hidden"><br>
</div>
<div class = "eventdetail">
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove" >Remove Ticket</a>
</div>
</section>
</div>
</div>
<div id = "eventdisplay">
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<div class="form-group border-dark pull-right">
<label><strong> Total Amount: 20340</strong></label><br>
<input id="etamt" value="20340" type = "hidden"><br>
</div>
<div class="form-group border-dark pull-right">
<label><strong>Qty: 4</strong></label><br>
<input id="etqty" value="4" type = "hidden">
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>
</div>

This isn't going to solve your problem, but here's a snippet where I commented out the bits that weren't working. Try putting a snippet like this into your question, with the things you need, and you'll be able to see what is and isn't working. You can also use https://codepen.io/ to build these things out and test more.
Consider using something other than jQuery, as it's pretty old these days!
create-react-app is a nice starting point if you want to try react.
Writing validation libraries from scratch is a huge task, there are so many tools and plugins now you can use to avoid starting from the ground up:
for jquery: https://jqueryvalidation.org/
for react some insight:
https://www.telerik.com/blogs/up-and-running-with-react-form-validation
If you're just doing this for the joy of learning how to solve this problem with jQuery, that's cool! Feel free to comment on this answer and I'll update it to try and help you. Here's the snippet example for your reference:
$("#book").click(function() {
var data = {
totalamount: document.getElementById('etamt').innerHTML,
venue: document.getElementById('cvenue').innerHTML,
email: $('#cvemail').val(),
// de: document.getElementById('des').innerHTML,
// oname: document.getElementById('coname').innerHTML,
name: document.getElementById('ctitle').innerHTML,
// frdate: document.getElementById('cedate').innerHTML,
// todate: document.getElementById('ctodate').innerHTML,
// byno: $('#buynumber').val(),
// byemail: $('#buymail').val(),
// byname: $('#buyname').val(),
// num: document.getElementById('etqty').innerHTML,
}
$.ajax({
async: true,
url: "eventdetail.php",
method: "POST",
data: $(data).serialize(),
// $('.eventdetail').serialize(),
success: function(rt) {
}
});
console.log(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12">
<input type="hidden" class="form-control" id="userid">
<input type="hidden" class="form-control" id="id">
<input type="hidden" class="form-control" id="cvemail">
<div class="row">
<div class="col-6">
<div class="form-group border-dark">
<label><strong>Info:</strong></label><br>
<label id="cinfo"></label><br>
</div>
</div>
<div class="col-6">
<div class="form-group border-dark">
<label><strong>Organized by:</strong></label><br>
<label id="coname"></label><br>
</div>
</div>
</div>
<div class="form-group border-dark" id="datediv">
<label><strong>Date and Time:</strong></label><br>
<label><strong>From:</strong></label>
<label id="cedate"></label><br>
<label><strong>To:</strong></label>
<label id="ctodate"></label><br>
</div>
<div class="form-group border-dark" id="vendiv">
<label><strong>Venue:</strong></label><br>
<label id="cvenue"></label><br>
</div>
<div style="display:none" class="eventdetail">
<div class="card" style="padding-left:0px;">
<div class="card-body">
<label class="pull-right" id="none"></label>
<label id="con"></label><br>
<label><b>Individual Details:</b></label>
<div class="form-inline">
<div class="form-group border-dark">
<input type="text" class="form-control" name="epname[]" placeholder="Enter individual's Full Name">
</div>
<div class="form-group border-dark">
<input type="email" class="form-control" name="epmail[]" placeholder="Enter individual's Email">
</div>
<div class="form-group border-dark">
<input type="tel" class="form-control" name="epnubmer[]" placeholder="Enter individual's Phone Number">
</div>
</div>
<section class="row">
<div align="center">
<a class="btn btn-outline-dark remove">Remove Ticket</a>
</div>
</section>
</div>
</div>
</div>
<div id="eventdisplay">
</div>
<div class="card" style="padding-left:0px;">
<div class="card-body">
<div class="form-group border-dark pull-right">
<label><strong> Total Amount:</strong></label><br>
<label id="etamt"></label><br>
</div>
<div class="form-group border-dark pull-right">
<label><strong>Qty:</strong></label><br>
<label id="etqty"></label>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="book">BOOK</button>
<button type="button" class="btn btn-success btn-sm btn-block font-weight-bold mt-3 mb-3" id="back1">BACK</button>
</div>

Dynamically add sequence numbers to labels

I have an HTML form which has text field with an add more button. When we click on the button a text field is added to the form. Following is the code for the form:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]">1.</label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="row">
<div class="col-lg-4">
<!-- Checkbox -->
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input" id="numCheck">
<span class="custom-control-label">Show numbers</span>
</label>
<!-- End Checkbox -->
</div>
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The js for adding the fields is as follows:
// Add more fields
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('u-btn-cyan').addClass('u-btn-lightred')
.html('<span class="fa fa-trash"></span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
Notice that I have prepended a label to the text field:
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
What I am unable to figure out is How can I add numbers to the label as I add more fields, 1 being the default number for the first Title field
Added form HTML with default field:
<div class="input-group g-mb-25">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="fields[]"></label>
</div>
<input type="text" class="form-control form-control-md" placeholder="Enter your Video Title. This will also be the starting point of your video..." aria-describedby="basic-addon1">
</div>
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1" />
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>
The new field is added as:
<div class="entry input-group ">
<div class="input-group-prepend">
<label class="input-group-text g-bg-white" for="inputGroupSelect01"></label>
</div>
<input class="form-control form-control-md" name="fields[]" type="text" placeholder="Type something" aria-describedby="basic-addon1">
<div class="input-group-append">
<button class="btn btn-md u-btn-cyan rounded-0 btn-add" type="button">
<span class="fa fa-plus align-middle mr-1"></span>
</button>
</div>
</div>