We Keep Coding

Copy data using checkbox not working in repeater field

On the 1st image link, I have enter the required data in the first tab.
On the 2nd image link, when I go to second tab and click on checkbox it copy data from 1st tab and show in the 2nd tab form
On the 3rd image link, when I repeat the form and also when click on check box the data did not show in the respective field.
$(document).ready(function() {
$(".repeater").repeater({
defaultValues: {
//"text-input": "foo"
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm("Are you sure you want to delete this element?")) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
//$dragAndDrop.on('drop', setIndexes);
},
repeaters: [
{
selector: ".inner-repeater"
}
]
});
});
function myFunction() {
var checkBox = document.getElementById("single_checkbox");
var door_no = document.getElementById("doorno");
var street_name = document.getElementById("streetname");
var client_area = document.getElementById("area");
var client_statename = document.getElementById("statename");
var client_dist = document.getElementById("distname");
var client_city = document.getElementById("city");
var client_pincode = document.getElementById("pincode");
var dr_number = document.getElementById("doornos");
var contact_street = document.getElementById("streetnames");
var contact_area = document.getElementById("contactarea");
var contact_state = document.getElementById("statenamecontact");
var contact_dist = document.getElementById("contactdist");
var contact_city = document.getElementById("contactcity");
var contact_pincode = document.getElementById("pincode_contact");
if (checkBox.checked == true){
dr_number.value=door_no.value;
contact_street.value=street_name.value;
contact_area.value=client_area.value;
contact_state.value=client_statename.value;
contact_dist.value=client_dist.value;
contact_city.value=client_city.value;
contact_pincode.value=client_pincode.value;
} else {
dr_number.value="";
contact_street.value="";
contact_area.value="";
contact_state.value="";
contact_dist.value="";
contact_city.value="";
contact_pincode.value="";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script>
<div class="row match-height">
<div class="col-md-12">
<div class="">
<div class=" collapse show">
<div class="">
<form action="clientinsert2" method="post" enctype="multipart/form-data">
<div class="">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Client</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Client Contact</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="tab-pane active pd_0"><br>
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Client Name </label>
<input type="text" class="form-control" value="" name="clientname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control" value="" name="phone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" value="" id="doorno" name="doorno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" value=""id="streetname" name="streetname">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" id="area" name="area" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State" id="statename" value="">
<option>Select</option>
<option>odisha</option>
<option>Bihar</option>
<option>Assam</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">District</label>
<select class="form-control" id="distname" name="districtname" value="">
<option>Select</option>
<option>jajpur</option>
<option>puri</option>
<option>cuttack</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname" id="city" value="">
<option>Select</option>
<option>Bhubaneswar</option>
<option>Bari</option>
<option>Mangalpur</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" value="" id="pincode">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status" value="">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Logo</label>
<input type="file" class="form-control" name="client_logo">
</div>
</div>
</div>
</div>
</div>
<!-- client contact form start-->
<div id="menu1" class="tab-pane fade pd_0"><br>
<div class="form-group mb-2 repeater">
<div data-repeater-list="outer-list">
<div data-repeater-item>
<div class="row mb-1">
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person </label>
<input type="text" class="form-control" name="contactname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person Phone</label>
<input type="text" class="form-control" name="contactphone">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Mail</label>
<input type="email" class="form-control" name="contactmail">
</div>
</div>
<!-- <div class="col-md-4">
<div class="form-group">
<label for="">Client Primary Spoc</label>
<div class="skin skin-square">
<input type="checkbox"
id="single_checkbox1" name="client_contact_primary_spoc"
value="checked">
<label for="single_checkbox1">checked</label>
</div>
</div>
</div> -->
<div class="col-md-4">
<div class="form-group">
<label for="">Designation</label>
<input type="text" class="form-control" name="designation">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Client Branch</label>
<select class="form-control" name="clientbranch">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Corporate Address</label>
<div class="">
<input type="checkbox" value="1" id="single_checkbox"
name="checkbox" onclick="myFunction()">
<label for="">checked
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" name="doorno" id="doornos">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" name="streetname" id="streetnames">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" name="area" id="contactarea">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State"
id="statenamecontact">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">District</label>
<select class="form-control" name="districtname"
id="contactdist">
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname"
id="contactcity">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" id="pincode_contact">
</div>
</div>
<div class="col-12">
<button type="button" data-repeater-delete
class="btn btn-icon btn-danger mr-1"><i
class="ft-x"></i></button>
</div>
</div>
</div>
</div>
<button type="button" data-repeater-create id="repeater-button"
class="btn btn-info">
<i class="ft-plus"></i> Add new file
</button>
</div>
<div class="form-actions">
<span id="hide">
<a href="/client"><input type="button" class="btn btn-warning"
value="Back"></a>
</span>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- Tab panes -->
</div>
</div>
</div>
</div>
</div>
<!-- Form wizard with icon tabs section end -->
</div>

Add data to dynamic table from modal form

I have a page that contains a form to collect some info. As part of that is a table where I'm trying to add rows of data from a modal form. Eventually, everything would be submitted to a SQL database.
Effectively, the whole form looks like:
Field 1
Field 2
Field 3
Field 5
Field 6
Field 7
Field 8
Delete
First
row
button
Second
row
Field 9
Submit
So field 1-3 would be appended to the beginning of each row upon submission to the SQL DB and 9 to the end.
The issue I'm having is getting the data entered in fields 5-8 on the modal form to appear in the table. What would be the best way to achieve this? I'm new to this so any help would be great.
I've had a look around and I see lots of way to get data out of a table to a modal form or to enter through fields in the table and add a new row that way like this (Add/Delete table rows dynamically using JavaScript) but I'd prefer to use a modal as my form for the table will end up being quite big.
HTML Form
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span> <br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
Modal
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form name="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<textarea class="form-control" name="components" id="components" required></textarea>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="classification" id="classification" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="button" class="btn btn-primary add-modal-waste" data-dismiss="modal"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>
</div>
</div>

move modal outside the form into a separate form
add submit listener to it (also add id and disable modal dismiss)
on modal form submit, validate data and create and append a table row, in which also add hidden inputs with values in a form of an array (userEntry[0][reference] etc.)
close modal, reset modal form
$(document).ready(function() {
let counter = 0;
$('#userEntry').on('submit', function(e) {
e.preventDefault();
const rows = [];
$.each($(this).serializeArray(), function(i, field) {
if (i > 0 && field.name === rows[rows.length - 1].name) {
rows[rows.length - 1].value += ';' + field.value;
} else {
rows.push(field);
}
});
let list = '<tr>';
$.each(rows, function(i, field) {
list += '<td>' + field.value + '<input type="hidden" name="userEntry[' + String(counter) + '][' + field.name + ']" value="' + field.value + '"/>' + '</td>';
});
list += '<td><button class="btn btn-warning" onclick="return this.parentNode.parentNode.remove();">delete</button></tr>';
$('#userList tbody').append(list);
$('#AddModal').modal('hide');
counter++;
$(this)[0].reset();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card-body">
<form action="inc/processnew.php" method="POST" id="newentry">
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Location</label>
<span class="text-danger">*</span>
<select class="form-control select2" data-toggle="select2" id="location" name="location" required>
<option value>Select location...</option>
<?php echo fill_location_select_box($conn);?>
</select>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Area</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="area" name="area" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Name</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="name" name="name" required>
</div>
</div>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Destination</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="destination" name="destination" required>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<td colspan="3"><a class="btn btn-primary" data-toggle="modal" data-target="#AddModal">Add New Item</a></td>
</br>
</br>
<div class="table-responsive">
<table id="userList" class="table table-small-font table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Reference</th>
<th>Components</th>
<th>Classification</th>
<th>Consigned</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</br>
<div class="row">
<div class="mb-3 col-md-6 error-placeholder">
<label>Declaration</label>
<span class="text-danger">*</span>
<br>
<input type="checkbox" class="form-check-input" id="declaration" name="declaration" value="Yes" required>
</div>
</div>
</br>
<div class="row">
<div class="md-3 col-md-6">
<input type="hidden" value="spacer">
</div>
</div>
<div class="row">
<div class="md-3 col-md-6">
<button type="submit" class="btn btn-primary" value="submit" id="submit" name="submit">Submit</button>
</div>
<div class="md-3 col-md-6">
<input type="hidden" value="<?php echo $today; ?>" id="date" name="date" required readonly>
</div>
</div>
</div>
</form>
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="userEntry">
<div class="modal-header">
<center>
<h4 class="modal-title" id="myModalLabel">Add New Item</h4>
</center>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Reference: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="reference" id="reference" required>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Components: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="components" name="components" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Classification: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<select class="form-control select3" data-toggle="select3" id="classification" name="classification" multiple required>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
</div>
</div>
</br>
<div class="row form-group">
<div class="col-sm-4">
<label class="control-label modal-label">Consigned: </label>
<span class="text-danger">*</span> </div>
<div class="col-sm-8">
<input type="text" class="form-control" name="consigned" id="consigned" required>
</div>
</div>
</br>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" data-dismiss="modal"><span class="fa fa-eject"></span> Cancel</button>
<button type="submit" class="btn btn-primary add-modal-waste"><span class="fa fa-save"></span> Save</a>
</div>
</form>
</div>
</div>

how to auto select value in dropdown in jsp using javascript for view filled data

I made one form in html, if user submit form then value stored in form will stored in database.
and i put one option Edit if user click on edit then open that filled form in model, but how to fill the dropdown in html.
this is my form code
<!-- Large Modal -->
<div id="additem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Message Preview</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="additem" enctype="multipart/form-data">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Price with
Discount</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="offerprice">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Product
Availability</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="availability">
<option value="" disabled selected>Product
Availability</option>
<option value="In Stock">In Stock</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
this is my button code for load data when click on edit this code will execute
<button class="adtocart"
onclick="loaddata(${listitem.item_id},'${listitem.name}','${listitem.brand}','${listitem.price}','${listitem.description}','${listitem.availability}','${listitem.itemtype}',${listitem.offerprice});"
data-toggle="modal" data-target="#edititem">
<i class="fa fa-edit"></i>
</button>
this is my javascript function for handel data send by button. this how i fill the value of text box
function loaddata(item_id,name,brand,price,description,availability,itemtype,offerprice)
{
alert("Hello! I am an alert box!");
document.f1.item_id.value=item_id;
document.f1.name.value=name;
document.f1.brand.value=brand;
document.f1.price.value=price;
document.f1.description.value=description;
}
below code is for display filled form for edit data
<!-- Edit Item Model Start -->
<!-- Large Modal -->
<div id="edititem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Edit Item</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="edititem" enctype="multipart/form-data"
name="f1">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="hidden" id="item_id" name="item_id"> <input
type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"
id="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
<!-- Edit Item Model End -->

Actually, I don't really know what you are looking for. But maybe this piece of code would be helpful.
function selectOption(value)
{
// get the select
const selectTest = document.f1.itemtype;
// the loop runs over all options
for (let i = 0; i < selectTest.options.length; i++)
{
if( value === selectTest.options[i].value)
{
// if the "value" is an possible option
// this option is selected and the loop is aborted.
selectTest.options[i].selected = true;
break;
}
}
}
// call the function with the value of the second option
selectOption('test2');
<form name="f1">
<select name="itemtype" >
<option value="test1">TEST 1</option>
<option value="test2">TEST 2</option>
<option value="test3">TEST 3</option>
<option value="test4">TEST 4</option>
<option value="test5">TEST 5</option>
<option value="test6">TEST 6</option>
</select>
</form>

Submit form data from selected radio button option only

I am working on a form where a user selects an option from radio buttons.
Then depending on option, a view of text fields appears. The user then inputs the required data and submits the form.
The options have different options and such data submitted should be different.
My challenge is how to submit only data from the selected radio button fields.
Anyone kindly help. Thank you
$(function () {
$('input[type="radio"]').on("click",function () {
$(".selections").hide(); // hide them all
if (this.value=="both") $(".selections").show(); // show both
else $("#"+this.value).show(); // show the one with ID=radio value
});
$('.selections input[type="checkbox"]').on("click",function() {
$(this).next().toggle(this.checked); // hide if not checked
});
$('.selections input[type="text"]').each(function() { // initialise
$(this).toggle($(this).prev().is(":checked"));
});
});
.selections { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" name="bill_type" value="percentage">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<!-- flat_rate radio button option -->
<div id="flat_rate" class="selections">
<input type="hidden" name="bill_type" value="flat_rate">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at">
</div>
<!-- variable radio button option -->
<div id="variable" class="selections">
<input type="hidden" name="bill_type" value="variable">
<div class="form-group">
<label for="limit" class="col-md-4 control-label">Limit</label>
<div class="col-md-4">
<input id="limit" placeholder="10" type="number" class="form-control" name="limit" autofocus>
</div>
</div>
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" name="send_at">
<br/>
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>

You should try to use Bootstrap Tabs [imho], but if you want to go with radios...
Disabling all inputs will prevent them from being submited:
$("#div :input").attr("disabled", true);
or
$('#div').find('input, textarea, button, select').attr('disabled','disabled');
Code from this post

Firstly you don't need same field repeatedly.Try like this
$(function () {
$('input[name="billing"]').on('change',function(){
$('#bill_type').val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" role="form" method="POST" action="set-up-bill-details">
<div class="form-group">
<label for="billing" class="col-md-4 control-label"> Select Billing Option</label>
<div class="col-md-6">
<input type="radio" name="billing" value="percentage" >Percentage
<input type="radio" name="billing" value="flat_rate" >Flat Rate
<input type="radio" name="billing" value="variable" >Variable
</br>
</div>
</div>
<!-- percentage radio option -->
<div id="percentage" class="selections">
<input type="hidden" id="bill_type" name="bill_type" value="">
<div class="form-group">
<label for="rate" class="col-md-4 control-label">Rate</label>
<div class="col-md-4">
<input id="rate" placeholder="10" type="number" class="form-control" name="rate" autofocus>
</div>
</div>
<input type="date" class="form-control" name="send_at" placeholder="the invoicing date">
</div>
<br/>
<br/>
<div class="form-group">
<div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2">
<button type="button" class="btn btn-sm btn-default btn-flat"
data-dismiss="modal">
<i class="fa fa-times" aria-hidden="true"> Close</i>
</button>
<button type="submit" class="btn btn-sm btn-facebook btn-flat pull-right">
<i class="fa fa-floppy-o" aria-hidden="true"> Save</i>
</button>
</div>
</div>
</form>
After submission you can do whatever based on the value of bill_type.

Add and remove multiple input group with jquery or javascript

I'm so confused how to add/remove multiple input fields in my code.
This is my code :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
</div>
</div>
I want to add new group of input fields when i'm click the button.
Please advice, Thanks

Try this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group" id="attrBarang">
<label class="col-sm-2 control-label">Kode Barang</label>
<div class="input-div">
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<a href="#modalCariBarang" data-toggle="modal" data-hover="tooltip" data-placement="top" title="Cari">
<span class='glyphicon glyphicon-search'></span>
</a>
</div>
<input type="text" class="form-control" placeholder="Pilih Barang" name="transaksiBarang" id="transaksiBarang" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Rp </div>
<input type="text" class="form-control cost" placeholder="Harga" name="transaksiHargaPcs" id="transaksiHargaPcs" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">Qty </div>
<input type="text" class="form-control cost" placeholder="Quantity" name="transaksiQtyItem" id="transaksiQtyItem" aria-describedby="basic-addon1" />
</div>
</div>
<div class="col-sm-1">
<div class="input-group">
<div class="input-group-addon">% </div>
<input type="text" class="form-control" value="0" name="transaksiDiskon" id="transaksiDiskon" aria-describedby="basic-addon1" />
</div>
</div>
</div>
<div class="col-sm-0">
<button id="b1" class="btn btn-success add-more"><span class="glyphicon glyphicon-plus-sign"></span></button>
<button id="b2" class="btn btn-success add-more"><span class="glyphicon glyphicon-minus-sign"></span></button>
</div>
</div>
And this is de jquery code:
$('#b1').click(function(){
var newGroup = $('.input-div').last().html();
$('.input-div').last().after('<div class="input-div">'+newGroup+'</div>');
});
$('#b2').click(function(){
$('.input-div').last().remove();
});