We Keep Coding

how can i store data in dynamic field using php and mysqli

I am creating a dynamic resume form in which I have created dynamic add remove field with the help of java script but I am not getting any idea to store the input values of this dynamic form in database I am giving some code below -
dynamic add Remove script code resume.js
$(document).ready(function(){
var maxField = 5; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML =
'<div class="field_wrapper"><div class="mb-3"><input type="text" name="skills[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function(){
//Check maximum number of input fields
if(x < maxField){
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
e.preventDefault();
$(this).parent('div').remove(); //Remove field html
x--; //Decrement field counter
});
});
// *************** Hobby******************
$(document).ready( function(){
var maxhobby = 4;
var addHobby = $('.add_hobby');
var hobby_wrapper = $('.hobby_wrapper');
var hobbyHTML = '<div class="hobby_wrapper"><div class="mt-sm-0"><input type="text" name="myhobby[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addHobby).click( function(){
if (x < maxhobby) {
x++
$(hobby_wrapper).append(hobbyHTML);
}
});
// Once Remove Button Click
$(hobby_wrapper).on('click', '.remove_hobby', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Job Objective******************
$(document).ready( function(){
var maxjob = 4;
var addjob = $('.add_job');
var job_wrapper = $('.job_wrapper');
var jobHTML = '<div class="job_wrapper"><div class="mt-sm-0"><input type="text" name="myjob[]" value=""class="form-control" /><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addjob).click( function(){
if (x < maxjob) {
x++
$(job_wrapper).append(jobHTML);
}
});
// Once Remove Button Click
$(job_wrapper).on('click', '.remove_job', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
// *************** Education ******************
$(document).ready( function(){
var maxedu = 10;
var addEdu = $('.add_edu');
var edu_wrapper = $('.edu_wrapper');
var eduHTML = '<div class="edu_wrapper"><hr><div class="d-flex justify-content-between mb-lg-3"><div class="col-md-6"><label class="form-label">School/University</label><input type="text" name="school_name[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">Degree/Course</label><input type="text" name="degree[]" class="form-control" required></div></div><div class="col-md-12"><label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label><input type="text" name="mark[]" value="" class="form-control"/></div><div class="d-flex justify-content-between"><div class="col-md-6"><label class="form-label">Start Date</label><input type="text" name="start_date[]" class="form-control" required></div><div class="col-md-6 ms-2"><label class="form-label">End Date</label><input type="text" name="end_date[]" class="form-control" required></div></div><img class="my-2" src="images/remove.png"/ width="32" height="32" style="float: right;" title="Delete"/></div>';
var x = 1;
$(addEdu).click( function(){
if (x < maxedu) {
x++
$(edu_wrapper).append(eduHTML);
}
});
// Once Remove Button Click
$(edu_wrapper).on('click', '.remove_edu', function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
and this is my form code for resume form.php
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="create-resumecv" method="post" enctype="multipart/form-data" name="add_name" id="add_name">
<!-- Start Education -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning">Education & Qualification</h4>
<div class="edu_wrapper">
<div class="d-flex justify-content-between mb-lg-3">
<div class="col-md-6">
<label class="form-label">School/University</label>
<input type="text" name="schoolname[]" class="form-control" >
</div>
<div class="col-md-6 ms-2">
<label class="form-label">Degree/Course</label>
<input type="text" name="degree[]" class="form-control" >
</div>
</div>
<div class="col-md-12">
<label for="exampleInputEmail1" class="form-label">Marks/Grade/CGPA</label>
<input type="text" name="mark[]" value="" class="form-control"/>
</div>
<div class="d-flex justify-content-between mt-3">
<div class="col-md-6">
<label class="form-label">Start Date</label>
<input type="date" name="startdate[]" class="form-control" >
</div>
<div class="col-md-6">
<label class="form-label">End Date</label>
<input type="date" name="enddate[]" class="form-control" >
</div>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_edu" title="Add More Eduction"><img src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
<!-- End Education -->
<!-- About Me -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">About Me</h4>
<div class="form-floating">
<textarea class="form-control" id="editor" name="aboutme"></textarea>
</div>
</div>
<!-- End -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Skills</h4>
<p class="text-muted">Add More Skill Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="field_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Skill</label>
<input type="text" name="skills[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_button" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- Start My Skill -->
<div class="card bg-light p-3 mb-3">
<h4 class="text-warning ">Job-Objective</h4>
<p class="text-muted">Add More Job Objective Max:5 and don't press enter button</p>
<div class="mb-auto">
<div class="job_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Job Objective</label>
<input type="text" name="myjob[]" value="" class="form-control"/>
</div>
</div>
<div class="mb-3" align="center">
<a href="javascript:void(0);" class="add_job" title="Add Skill"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!--End My Skill -->
<!-- My Hobbies -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Hobbies</h4>
<div class="mb-3">
<div class="hobby_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Enter Hobby</label>
<input type="text" name="myhobby[]" value="" class="form-control"/>
</div>
</div>
<div class="mt-3" align="center">
<a href="javascript:void(0);" class="add_hobby" title="Add hobby"><img class="mb-2" src="images/add.png"/ width="28" height="28"/></a >
</div>
</div>
</div>
<!-- end My Hobbies -->
<!--Start Experience -->
<div class="card bg-light' p-3 mb-3">
<h4 class="text-warning">Experience</h4>
<div class="expe_wrapper">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="experience_title" class="form-control">
</div>
<div class="mb-3">
<div class="form-floating">
<label for="exampleInputEmail1" class="form-label">Description</label>
<textarea class="form-control" name="experience_des" id="editor2"></textarea>
</div>
</div>
</div>
</div>
<!-- end Experience -->
<div class="text-center">
<button type="submit" title="Submit your form for generate Resume" class="btn btn-success mb-5" name="create-resume" id="submit"> <img src="<?php echo BASE_URL . 'reg-users/images/resume.png' ?>" style="width: 20px; height: 20px;"> Create Resume</button>
</div>
</form>
there are no any issue to add or remove dynamic input field its work correctly, but don't have an idea to store dynamic add field form values in mysqli database.
please tell me how can i store dynamic input field values in database using PHP.

At last I found the solution, so I am posting the answer.
See, when we want to store the input values of the form in the form of an array in the database, then we simply define a string to array, it is a simple thing.
I have used the implode and explode function of php in this solution, then I got the perfect solution. You can also use this function if you want.
implode(",", $array); // defined or predefined.
The implode() function returns a string from the elements of an array.
explode(",", $array); // you want break array to string.
The explode() function breaks a string into an array.

Can't save data from Html Asp.net Core to Mysql Using

I am learning frontend and I face this problem to save data from Html to Mysql in Asp.Net Core:
I have Order Model
OrderDetails Model
and I made ViewModel
Html table coded to add Rows dinamicly
And i get project , supplier and Item by viewdata as select items
All above it was done But can not save the record!!
<link rel="stylesheet" href="~/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="~/css/style.css">
<!-- container -->
<div class="container" >
<div style="align-items:self-end">
<input type="button" onclick="enabled()" value=" New Purchace Order" style="margin:10px 10px;" id="newOrder" class="btn btn-info" />
</div>
#* <div class="row bg-info m-1 block">
<div class="text-center col-md-8">
<h1> Purchace Order <span id="countpro"></span></h1>
</div>
</div>*#
<!-- Order Section -->
#*<form asp-action="Create">*#
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row bg-secondary m-1 block">
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="OrderNO" class="control-label"></label>
<input asp-for="OrderNO" id="poNO" class="form-control" />
<span asp-validation-for="OrderNO" class="text-danger"></span>
</div></div>
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="OrderDate" class="control-label"></label>
<input asp-for="OrderDate" id="poDate" class="form-control" />
<span asp-validation-for="OrderDate" class="text-danger"></span>
</div></div>
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="Status" class="control-label"></label>
<input asp-for="Status" id="status" class="form-control" />
<span asp-validation-for="Status" class="text-danger"></span>
</div></div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label asp-for="ProjectId" class="control-label"></label>
<select asp-for="ProjectId" id="project" class ="form-control" asp-items="ViewBag.ProjectId"></select>
</div></div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label asp-for="SupplierId" class="control-label"></label>
<select asp-for="SupplierId" id="supplier" class ="form-control" asp-items="ViewBag.SupplierId"></select>
</div></div>
<div class="form-group">
<label asp-for="Subject" class="control-label"></label>
<input asp-for="Subject" id="subject" placeholder="Enter Order Description ...." class="form-control" />
<span asp-validation-for="Subject" class="text-danger"></span>
</div>
</div>
<!-- End Order Section -->
<!-- Item Section -->
<div class="row bg-primary m-1 block">
<div class="col-md-5 col-sm-12">
<div class="form-group">
<label asp-for="ItemId" class="control-label"></label>
<select asp-for="ItemId" id="item" asp-placeholder="Select Item ...." class ="form-control" asp-items="ViewBag.ItemId"></select>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="UnitId" class="control-label"></label>
<select asp-for="UnitId" id="unit" class ="form-control" asp-items="ViewBag.UnitId"></select>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="Qty" class="control-label"></label>
<input asp-for="Qty" id="qty" class="form-control" onkeyup="getTotal()" onchange="getTotal()"/>
<span asp-validation-for="Qty" class="text-danger"></span>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" id="price" class="form-control" onkeyup="getTotal()" onchange="getTotal()" />
<span asp-validation-for="Price" class="text-danger"></span>
</div> </div>
<div class="col-md-2 col-sm-12">
<div class="form-group">
<label asp-for="Total" class="control-label"></label>
<input asp-for="Total" id="total" class="form-control bg-danger text-center" disabled value="0" />
<span asp-validation-for="Total" class="text-danger"></span>
</div></div>
<div class="col-md-2 col-sm-12">
<label class="control-label">Add</label>
<button class="btn btn-success " onclick=" addRow();" id="addButton">
<i class="fas fa-plus"></i></button>
</div>
</div>
<!-- End Item Section -->
<!-- Table -->
<table class="table " style="width:100%;" id="tablPro">
<thead>
<tr>
<th>#</th>
<th style="width:30%;">Product/Service</th>
<th style="width:10%;">Unit</th>
<th style="width:10%;">Qty</th>
<th style="width:10%;">Price</th>
<th style="width:15%;">Total</th>
<th style="width:5%;"></th>
<th style="width:5%;"></th>
</tr>
</thead>
<tbody id="tablePro">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!-- End Table -->
<!-- Total Section -->
#* <div class="row bg-teal m-1 block" id="divPrint">*#
<div class="totalcontainer">
<div class="col-md-3 col-sm-12">
<label asp-for="SubTotal" style="color:Black;" class="control-label"></label>
<input asp-for="SubTotal" id="subTotal" class="form-control" />
<span asp-validation-for="SubTotal" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12">
<label asp-for="Vat" style="color:Black;" class="control-label"></label>
<input asp-for="Vat" id="vat" class="form-control" />
<span asp-validation-for="Vat" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12">
<label asp-for="GrandTotal" style="color:Black;" class="control-label"></label>
<input asp-for="GrandTotal" id="grandTotal" class="form-control" />
<span asp-validation-for="GrandTotal" class="text-danger"></span>
</div>
<div class="text-center">
<input type="submit" value=" + Save Purchace Order" id="saveBtn" style="margin:10px 10px;" class="btn btn-primary" />
</div>
</div>
<!-- End Total Section -->
<hr />
<!-- End Createor Section -->
<div class="row block">
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label asp-for="CreatedBy" style="color:Black;" class="control-label"></label>
<input asp-for="CreatedBy" class="form-control" />
<span asp-validation-for="CreatedBy" class="text-danger"></span>
</div> </div>
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label asp-for="TimeStamp" style="color:Black;" class="control-label"></label>
<input asp-for="TimeStamp" class="form-control" />
<span asp-validation-for="TimeStamp" class="text-danger"></span>
</div> </div>
</div>
<!-- End Createor Section -->
#* </form>*#
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/js/addRow.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="~/lib/font-awesome/js/all.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
// $('#saveBtn').click(function() {
// var data = $('input').serialize();
// $.post(url, data, function(data) {
// console.log(data);
// });
//});
$(function () {
$("#saveBtn").click(function () {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "CreatePos/Create",
data: "{'poNo':'" + $("#poNO").val() +
"', 'poDate':'" + $("#poDate").val() +
"', 'status':'" + $("#status").val() +
"', 'project':'" + $("#project").val() +
"', 'supplier':'" + $("#supplier").val() +
"', 'Subject':'" + $("#Subject").val() +
"', 'item':'" + $("#item").val() +
"', 'unit':'" + $("#unit").val() +
"', 'qty':'" + $("#qty").val() +
"', 'total':'" + $("#total").val() +
"', 'subTotal':'" + $("#subTotal").val() +
"', 'vat':'" + $("#vat").val() +
"', 'grandTotal':'" + $("#grandTotal").val() + "'}",
async: false,
success: function (response) {
$("#poNO").val("");
$("#poDate").val("");
$("#status").val("");
$("#project").val("");
$("#supplier").val("");
$("#Subject").val("");
$("#item").val("");
$("#unit").val("");
$("#qty").val("");
$("#total").val("");
$("#subTotal").val("");
$("#vat").val("");
$("#grandTotal").val()
alert("record has been saved in database");
},
error: function () {
console.log("there is some error");
}
});
});
});
</script>
}
And her is the Script File
var value = document.getElementById('item');
var getItem = value.options[value.selectedIndex].text;
var unitValue = document.getElementById('unit');
var getUnit = unitValue.options[unitValue.selectedIndex].text;
var qty = document.getElementById('qty').value;
var price = document.getElementById('price').value;
var total = document.getElementById('total').value;
var table = document.getElementsByTagName('table')[0];
var newRow = table.insertRow(table.rows.length);
var x = newRow.rowIndex - 1;
var editBtn =`<button class="btn btn-info" id="editRow">
<i class="fas fa-edit"></i>
</button>` ;
var deleteBtn =`<button class="btn btn-danger" onclick="deleteRow(this)">
<i class="fas fa-trash"></i>
</button>` ;
//defination of row cells
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
var cell6 = newRow.insertCell(5);
var cell7 = newRow.insertCell(6);
var cell8 = newRow.insertCell(7);
// Push row Values into tabel Body
cell1.innerHTML = x++;
cell2.innerHTML = getItem;
cell3.innerHTML = getUnit;
cell4.innerHTML = qty;
cell5.innerHTML = price;
cell6.innerHTML = total;
cell7.innerHTML = editBtn;
cell8.innerHTML = deleteBtn;
}
function getTotal() {
if (price.value != '') {
let result = price.value * qty.value;
total.value = result;
total.style.background = '#040';
let vatPercentage = 0.15;
let subtotal = document.getElementById('subTotal');
let vat = document.getElementById('vat');
let grandTotal = document.getElementById('grandTotal');
subtotal.value = total.value;
vat.value = subtotal.value * vatPercentage;
grandTotal.value = +vat.value + +subtotal.value;
}
else {
total.value = '';
total.style.background = '#a00d02';
}
}
Finally This is the controller
POST: CreatePos/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("OrderId,OrderNO,OrderDate,Subject,Status,CreatedBy,TimeStamp,ProjectId,SupplierId,ItemId,UnitId,Qty,Price,Total,SubTotal,Vat,GrandTotal")] CreatePoModel createPoModel)
{
if (ModelState.IsValid)
{
_context.Add(createPoModel);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
ViewData["ProjectId"] = new SelectList(_context.Projects, "ProjectId", "ProjectName", createPoModel.ProjectId);
ViewData["SupplierId"] = new SelectList(_context.Suppliers, "SupplierId", "SupplierName", createPoModel.SupplierId);
ViewData["ItemId"] = new SelectList(_context.PoItems, "ItemId", "ItemName", createPoModel.ItemId);
ViewData["UnitId"] = new SelectList(_context.Units, "UnitId", "UnitCode", createPoModel.UnitId);
return View(createPoModel);
}
Please Consider that I am beginner still learning: (

How to delete div and all element inside div? Javascript, html, css

I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.
<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="display: flex;">
<div class="modal-body">
<form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">
<div class="container-fluid">
<div class="step_1" >
<h3 class="modal-title">Reifenmontage Termin buchen </h3>
<div class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Pneu-Typ</label>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
<option value="Motorrad">Motorrad</option>
<option value="Auto">Auto</option>
</select>
</div>
</div>
</div>
<div id="additionalRow" class="row termin_row" >
<div id="reifenmontage-input" class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Mark und model</label>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="marka" class="form-control" id="button-getdata">
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="model" class="form-control" id="result" >
</select>
</div>
</div>
</div>
</div>
<div class="row termin_row">
<div class="col-sm-4 col-xs-12">
<div class="row"><label>2. Terminvorschlag</label></div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group date" id="date-2" data-termin="1">
<input type='text' class="form-control" name="date[1]" />
<span class="input-group-addon">um</span>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group time" id="time-2" data-termin="1">
<input type='text' class="form-control" name="time[1]" />
<span class="input-group-addon">Uhr</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="checkbox">
<label>
<input type="checkbox" name="accept" id="accept"> Ich akzeptiere die Teilnahmebedingungen
</label>
</div>
</div>
<div class="row text-center">
<button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
</div>
</div>
<div class="step_2">
<h3 class="modal-title">Your contact info</h3>
<div class="">
<div class="form-group clearfix">
<input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
</div>
<div class="form-group clearfix">
<input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
</div>
<div class="form-group clearfix">
<input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
</div>
<div class="text-center">
<button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
</div>
</div>
</div>
</div>
and my script tag
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
let additionalRow = document.getElementById('additionalRow');
function checkSelected() {
if (selectItem.selectedIndex == "1") {
additionalRow.style.display = 'none';
} else {
additionalRow.style.display = 'block';
}
}
</script>
<script type="text/javascript">
$('#button-getdata').on('change', function() {
$.ajax({
url: 'index.php?route=api/reifenmontage/get_marka_data',
type: 'post',
data: $('#reifenmontage-input select'),
dataType: 'json',
beforeSend: function() {
},
success: function(json) {
if (json['success']) {
$("#result").empty();
for (i in json['success']) {
var element = json['success'][i];
var o = new Option(element['model'], element['model']);
$("#result").append(o);
html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
$("#result").append(o);
}
// document.getElementById("schedule_form").reset();
}
}
});
});
</script>
<script type="text/javascript">
$.ajax({
url: 'index.php?route=api/reifenmontage/mark',
context: document.body,
success: function(data) {
const selectControl = $('#button-getdata');
selectControl.html(data.map(ExtractData).join(''));
}
});
function ExtractData(item) {
return ` <option value="${item.value}">${item.label}</option>`;
}
</script>

Try variant with detaching/attaching DOM elements
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
//let additionalRow = document.getElementById('additionalRow');
let detached = '';
function checkSelected() {
if (selectItem.selectedIndex == "1") {
detached = $('#reifenmontage-input').detach();
} else {
detached.appendTo('#additionalRow');
}
}
</script>

Create dynamic input in dynamic form when I select an option

I am trying to create a dynamic form that adds another field when choosing Verification select, the problem is that when I add fields of options in Verification at the time of adding another form, the options that I previously added appear, as I do to add a new form and don't show added options? I appreciate your help thanks!
$(document).ready(function() {
$('.verificar-free').hide();
$('.duplicate-free').hide();
$('.optionRow').hide();
var count = 2;
//duplicate
$('a.add-free').on('click', function() {
//clone
var row = $('.duplicate-free').clone();
$(row).insertAfter('.aditional-box-free');
$(row).show();
//add new ids
$(row).find('select').attr('id', 'select-free_' + count);
//remove duplicate class
$(row).removeClass('duplicate-free');
//onchange of select
$('select').on('change', function() {
var value = $(this).val();
var select = $(this).parent();
if (value == 1) {
$(select).siblings('.input-free').show();
$(select).siblings('.ocultar-free').hide();
} else {
$(select).siblings('.input-free').hide();
}
if (value == 2) {
$(select).siblings('.ocultar-free').show();
$(select).siblings('.verificar-free').show();
} else {
$(select).siblings('.verificar-free').hide();
}
});
//add option
$(".addRow-free").click(function() {
var html = "<div class='option-free' id='" + count + "'><div class='form-group'><div class='input-group select'><input type='text' class='form-control' placeholder='Añade opción' /><span class='input-group-btn'><button class='btn btn-primary remove-option' type='button'><a class='remove-tipe' href='javascript: void(0)'><span class='glyphicon glyphicon-trash' style='color:white'></span></a></button></span></div></div></div>";
var form = $(html);
$(this).closest(".verificar-free").find(".optionRow-free").append(form);
});
count++;
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="aditional-questions text">
<div class="aditional-box-free">
<p class="aditional-text" for=""><b>Add Question</b>
<a class="btn btn-primary agregar add-free" href="javascript: void(0)" type="button"><span></span>Add</a>
</p>
</div>
<div class="duplicate-free all-free" style="text-align: center">
<div class="box-question">
<div class="row">
<label class="type-question-text" for="">Question Type</label>
<div class="col-md-12">
<select class="form-control select">
<option value="1">Text</option>
<option value="2">Verification</option>
</select>
</div>
<div class="row ocultar-free">
<div class="col-md-12">
<label class="type-question-text" for="">Title</label>
<div class="form-group">
<input type="text" id="" class="form-control text general" placeholder="Question">
</div>
</div>
</div>
<!--aditional option-->
<div class="row verificar-free">
<div class="text">
<div class="col-md-6">
</div>
</div>
<div class="text option text" style="margin-top:10px;">
<a class="btn btn-primary addRow-free" href="javascript: void(0)" type="button"><span></span>Add Option</a>
</div>
<br>
<div class="form-group optionRow-free">
</div>
</div>
</div>
<br>
</div>
</div>
</div>

If I'm not wrong with your question.
The problem is you got same(duplicate) added input right? (If more than 1 question)
Change this line
$(".optionRow-free").append(form);
To
$(this).closest(".verificar-free").find(".optionRow-free").append(form);

Show / hide table does'nt work on onchange dropdown

Apparently there isnt any error inside my console but when I click on an element inside the drop-down, a table must appear/disappear. This point doesn't work.
you can see in action here
$('select[name=\'type\']').on('change', function() {
if (this.value == 'select' || this.value == 'radio' || this.value == 'checkbox' || this.value == 'image') {
$('#option-value').parent().show();
} else {
$('#option-value').parent().hide();
}
});
$('select[name=\'type\']').trigger('change');
var option_value_row = 0
function addOptionValue() {
html = '<tr id="option-value-row' + option_value_row + '">';
html += ' <td class="text-left"><input type="hidden" name="option_value[' + option_value_row + '][option_value_id]" value="" />';
html += '<img src="http://clicshopping.no-ip.biz/clicshopping_test/boutique/sources/third_party/flag-icon-css/flags/4x3/us.svg" alt="Anglais" title="Anglais" width="16" height="12" /><input type="text" name="option_value[' + option_value_row + '][option_value_description][name][0]" value="" class="form-control" required aria-required="true" />';
html += '<input type="hidden" name="option_value[' + option_value_row + '][option_value_description][language_id][0]" value="1" class="form-control" />';
html += '<img src="http://clicshopping.no-ip.biz/clicshopping_test/boutique/sources/third_party/flag-icon-css/flags/4x3/fr.svg" alt="Francais" title="Francais" width="16" height="12" /><input type="text" name="option_value[' + option_value_row + '][option_value_description][name][1]" value="" class="form-control" required aria-required="true" />';
html += '<input type="hidden" name="option_value[' + option_value_row + '][option_value_description][language_id][1]" value="2" class="form-control" />';
html += ' </td>';
html += ' <td> <input type="file" name="option_value[' + option_value_row + '][image]" value="" accept="image/*" class="form-control" /><input type="hidden" name="MAX_FILE_SIZE" value="1024"></td>';
html += ' <td class="text-right"><input type="text" name="option_value[' + option_value_row + '][sort_order]" value="" class="form-control" /></td>';
html += ' <td class="text-right"><button type="button" onclick="$(\'#option-value-row' + option_value_row + '\').remove();" data-toggle="tooltip" title="button_remove" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#option-value tbody').append(html);
option_value_row++;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="attributesGroupTabs" style="overflow: auto;">
<ul class="nav nav-tabs flex-column flex-sm-row" role="tablist" id="myTab">
<li class="nav-item">Géneral</li>
<li class="nav-item">Valeurs option</li>
</ul>
<div class="tabsClicShopping">
<div class="tab-content">
<div class="col-md-12 tab-pane active" id="tab1">
<div class="separator"></div>
<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="code" class="col-2 col-form-label">en</label>
<div class="col-md-5">
<input type="1" name="name[1]" class="form-control" required aria-required="true" required="" id="attributes_name" placeholder="Nom option" class="form-control" /> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="code" class="col-2 col-form-label">fr</label>
<div class="col-md-5">
<input type="1" name="name[2]" class="form-control" required aria-required="true" required="" id="attributes_name" placeholder="Nom option" class="form-control" /> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="Type Html" class="col-5 col-form-label">Type Html</label>
<div class="col-md-5">
<select name="type" id="input-type" class="form-control"><option value="2">checkbox</option><option value="7">date</option><option value="9">datetime</option><option value="4">file</option><option value="1">radio</option><option value="5">select</option><option value="3">text</option><option value="6">textarea</option><option value="8">time</option></select> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group row">
<label for="Ordre de tri" class="col-5 col-form-label">Ordre de tri</label>
<div class="col-md-5">
<input type="text" name="sort_order" value="0" placeholder="Ordre de tri" class="form-control" /> </div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="separator"></div>
<table id="option-value" class="table table-sm table-hover table-hover">
<thead>
<tr class="dataTableHeadingRow">
<td class="text-md-center" width="50%">Nom de la valeur</td>
<td class="text-md-center" width="30%">Image</td>
<td class="text-md-center" width="10%">Ordre de tri</td>
<td class="text-md-right" width="10%">Action</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
<td class="text-right"><button type="button" onclick="addOptionValue();" data-toggle="tooltip" title="button_add" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

The values of your options are all numbers, yet you compare the select value to strings such as “checkbox”, “radio”.
You could change the handler to look for the numeric values instead, or you could change the values of each option to be the strings you are expecting.