Develop Reference

2D Array Query - unexpected commas in output despite using join();

I'm doing my best to learn jQuery, and I'm a little stuck. I'm trying to make a 2d array of form data in a table, and it seems to work, but I'm returning commas when I try to get the values, even when I use join().
I'm wondering if I'm doing something wrong. I'm using a button event to trigger an alert to show the values with join().
Here is the HTML:
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td> <input type="text" class="pull-right form-control" name="" value="D"></td>
<td> <input type="text" class="pull-right form-control" name="" value="E"></td>
<td> <input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td> <input type="text" class="pull-right form-control" name="" value="H"></td>
<td> <input type="text" class="pull-right form-control" name="" value="I"></td>
<td> <input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td> <input type="text" class="pull-right form-control" name="" value="K"></td>
<td> <input type="text" class="pull-right form-control" name="" value="L"></td>
<td> <input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1" style="width:100px, height:100px">Click</button>
Here is the jquery/javascript:
$("#btn1").click(function(){
var tableData = $('tr').map(function() {
return [$(this).find(':input').map(function() {
return $(this).val()
}).get()]
}).get()
alert(tableData.join(""));
console.log(tableData)
});
This is my output for the above: D,E,FH,I,JK,L,M

Assuming from the question that your goal is to remove all the commas in the output string then you need to also join() the inner array too. Also note that you can make the code more succinct using arrow functions. Try this:
$("#btn1").click(function() {
var tableData = $('tr').map((_, tr) => [
$(tr).find(':input').map((_, inp) => inp.value).get().join('')
]).get();
console.log(tableData.join(''));
});
#btn1 { width: 100px; height: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td><input type="text" class="pull-right form-control" name="" value="D"></td>
<td><input type="text" class="pull-right form-control" name="" value="E"></td>
<td><input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="H"></td>
<td><input type="text" class="pull-right form-control" name="" value="I"></td>
<td><input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="K"></td>
<td><input type="text" class="pull-right form-control" name="" value="L"></td>
<td><input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1">Click</button>
However, if your goal is to create that output then you don't need two loops. You can loop directly through the inputs to create the flattened string:
$("#btn1").click(function() {
var tableData = $('input.form-control').map((_, inp) => inp.value).get().join('');
console.log(tableData);
});
#btn1 { width: 100px; height: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td><input type="text" class="pull-right form-control" name="" value="D"></td>
<td><input type="text" class="pull-right form-control" name="" value="E"></td>
<td><input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="H"></td>
<td><input type="text" class="pull-right form-control" name="" value="I"></td>
<td><input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="K"></td>
<td><input type="text" class="pull-right form-control" name="" value="L"></td>
<td><input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1">Click</button>

Get total as you type with added column (append) using jQuery

<button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
<table class="table table-bordered" id="supplier_table">
<thead>
<tr id="first-header">
<th></th>
<th></th>
<th colspan="2">Supplier</th>
</tr>
<tr id="second-header">
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
<td><input type="text" class="form-control" id="usr" value="10" readonly=""></td>
<td><input type="text" class="form-control" id="price"></td>
<td><input type="text" class="form-control" id="total"></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
<td><input type="text" class="form-control" id="usr" value="20" readonly=""></td>
<td><input type="text" class="form-control" id="price"></td>
<td><input type="text" class="form-control" id="total"></td>
</tr>
<tr>
<td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
<td><input type="text" class="form-control" id="usr" value="30" readonly=""></td>
<td><input type="text" class="form-control" id="price"></td>
<td><input type="text" class="form-control" id="total"></td>
</tr>
</tbody>
</table>
This is the add column (append)
$(function() {
$('#add_supplier').click(function() {
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>' +
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control" id="price"></td>' +
'<td><input type="text" class="form-control" id="total"></td>'
);
});
});
Demo Link: JSFIDDLE

One issue if that the newly-added column id's are missing the id number. If you look at the id, it only shows "price-", when it should probably be "price-2-1", since the original ones are "price-1", and the original ones should probably be something like "price-1-1".
Aside from that, the problem is you need to also add the event listeners to the newly-created items:
$('#add_supplier').click(function(){
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>'+
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control price" id="price-"></td>'+
'<td><input type="text" class="form-control total" id="total-" readonly></td>'
);
$(".price").each(function () {
$(this).keyup(function () {
multInputs();
});
});
});

With the method below you can search the fields according to proximity, thus being able to make the calculations with the necessary parameters.
$(function(){
$('#add_supplier').click(function(){
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>'+
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control price" id="price-"></td>'+
'<td><input type="text" class="form-control total" id="total-" readonly></td>'
);
bindPrice();
});
bindPrice();
});
function bindPrice(){
$('.price').off().on('keyup', function(){
$total = $(this).parents().eq(0).next().find('.total');
$qty = $(this).parents().eq(1).find('.qty');
$total.val($(this).val() * $qty.val() )
});
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
#supplier_table thead th,
td {
text-align: center;
}
</style>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
<table class="table table-bordered" id="supplier_table">
<thead>
<tr id="first-header">
<th></th>
<th></th>
<th colspan="2">Supplier</th>
</tr>
<tr id="second-header">
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
<td><input type="text" class="form-control qty" id="qrt-1" value="10" readonly=""></td>
<td><input type="text" class="form-control price" id="price-1"></td>
<td><input type="text" class="form-control total" id="total-1" readonly></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
<td><input type="text" class="form-control qty" id="qty-3" value="20" readonly=""></td>
<td><input type="text" class="form-control price" id="price-3"></td>
<td><input type="text" class="form-control total" id="total-3" readonly></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
<td><input type="text" class="form-control qty" id="qty-5" value="30" readonly=""></td>
<td><input type="text" class="form-control price" id="price-5"></td>
<td><input type="text" class="form-control total" id="total-5" readonly></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

on submit compare two dynamically generated column in a table and display alert

I have a table with few column, all are disable except two fields.
Compare the value in the first Quanity column with the value in the second Quanity column.
If value in the second Quanity column is more that first Quanity column it should display alert.
When I tried comparison based on ID's it works fine with one row but when there are multiply row it does not work.
When I tried comparison based on classes it work on the first row but it not comparing 2nd row.
Thanks in Advance.
NOTE: All the Row are generated dynamically from the back end.
/*avaliable products valadations*/
function validateAvaliable(){
var aproducts = parseInt($( ".available-quanity" ).val());
var sproducts = parseInt($( ".send-quanity" ).val());
console.log(aproducts);
console.log(sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

$( ".available-quanity" ) and $( ".send-quanity" ) both return lists of elements, so you will have to use a loop to compare all values, Also use event.preventDefault() so that the form doesn't submit. something like this:
/*avaliable products valadations*/
function validateAvaliable(event){
event.preventDefault();
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
//console.log(aproducts);
//console.log(sproducts);
for(var i=0;i<aproducts.length;i++){
if (parseInt($(aproducts[i]).val()) < parseInt($(sproducts[i]).val())) {
alert("send products are more");
return false;
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable(event)" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

$( ".available-quanity" ) and $( ".send-quanity" ) gives you array of elements (one for each row). So you should iterate over these arrays with some loop:
var aproducts = $( ".available-quanity" );
var sproducts = $( ".send-quanity" );
for (var i = 0; i < aproducts.length; i++){
// Values per row:
var aproducts_val = parseInt($(aproducts[i]).val()); // Or just parseInt(aproducts[i].value)
var sproducts_val = parseInt($(sproducts[i]).val());
// ... Compare here ...
}

Multiple rows should be in loop to check the values. Please refer below code snippet..
function validateAvaliable(){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
} );
}
/*avaliable products valadations*/
$('#submit').on('click',function(event){
$("table tr").each(function(tr) {
if($(this).find('.available-quanity').length && $(this).find('.send-quanity').length) {
var aproducts = parseInt($(this).find('.available-quanity').val());
var sproducts = parseInt($(this).find('.send-quanity').val());
console.log('test',aproducts);
console.log('test1',sproducts );
if (aproducts < sproducts) {
alert("send products are more");
event.preventDefault();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table" id="available-products-table" method="POST" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" disabled value="1" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="123" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="50" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="black" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity"></td>
</tr>
<tr>
<td><input type="text" name="available-sno" disabled value="2" class="form-control available-sno"></td>
<td><input type="text" name="available-name" disabled value="shoes" class="form-control available-name"></td>
<td><input type="text" name="available-id" disabled value="456" class="form-control available-id"></td>
<td><input type="number" name="available-quanity" disabled value="30" class="form-control available-quanity"></td>
<td><input type="text" name="available-brand" disabled value="adidas" class="form-control available-brand"></td>
<td><input type="text" name="available-color" disabled value="red" class="form-control available-color"></td>
<td><input type="checkbox" name="product-status" class="form-control product-status"></td>
<td><input type="number" name="send-quanity" required class="form-control send-quanity" ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" id="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

Please check this fiddle.
I have added class mytr for tr.
http://jsfiddle.net/pzphbnxb/42/
$(document).on('change', '.send-quanity', function(e){
var elem = $(this);
var changeVal = $(this).val();
var myval = elem.closest('.mytr').find('.available-quanity').val();
if(parseInt(changeVal) > parseInt(myval)){
alert('value greater');
}
});

Boostrap dynically row with value

i try to add a new row inside table, but all the fields inside this new row must have a new value everytime
This script allow to add a new row but it does'nt change automaticly the value of the row
<table width="100%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td><table class="table table-sm table-hover" id="mtable">
<thead>
<tr>
<th>id</th>
<th class="col-md-2">Fournisseur</th>
<th class="col-md-2">Groupe Clients</th>
<th class="col-md-2">Range Quantité</th>
<th class="col-md-2">Prix Fournisseur</th>
<th class="col-md-2">% Remise Client</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>84 <input type="hidden" name="id" value="84" /></td>
<td class="col-md-2"><select name="suppliers_id[84]" id="suppliers_id[84]" class="form-control"><option value="">--Aucun--</option><option value="1" selected="selected">test</option></select></td>
<td class="col-md-2"><select name="customers_group_id[84]" id="customers_group_id[84]" class="form-control"><option value="" selected="selected">Normal</option><option value="1">Tarifs 1</option></select></td>
<td class="col-md-2"><input type="text" name="discount_quantity[84]" value="5" placeholder="Qty" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_supplier_price[84]" value="5" placeholder="Supplier Price" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_customer[84]" value="5" placeholder="Discount without %" class="form-control" /></td>
<td></td>
</tr>
.........
<tr>
<td>102 <input type="hidden" name="id" value="102" /></td>
<td class="col-md-2"><select name="suppliers_id[102]" id="suppliers_id[102]" class="form-control"><option value="">--Aucun--</option><option value="1" selected="selected">test</option></select></td>
<td class="col-md-2"><select name="customers_group_id[102]" id="customers_group_id[102]" class="form-control"><option value="" selected="selected">Normal</option><option value="1">Tarifs 1</option></select></td>
<td class="col-md-2"><input type="text" name="discount_quantity[102]" value="5" placeholder="Qty" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_supplier_price[102]" value="5" placeholder="Supplier Price" class="form-control" /></td>
<td class="col-md-2"><input type="text" name="discount_customer[102]" value="5" placeholder="Discount without %" class="form-control" /></td>
<td></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
Below, for example, I add a new value, but this value is only for the first column.
The $new_id (new id value) must be applied for all column and everytime I add a column, the id has a news value.
I am not good in javascript. A little help.
Tk
<?php
$new_id = $id + 1;
?>
<input id="row" value="<?php echo $new_id; ?>" placeholder="Enter Item Name"/><button type="button" id="irow">Insert Row</><br/><br/>
<script>
$('#irow').click(function(){
if($('#row').val()){
$('#mtable tbody').append($("#mtable tbody tr:last").clone());
$('#mtable tbody tr:last :checkbox').attr('checked',false);
$('#mtable tbody tr:last td:first').html($('#row').val());
}else{alert('Enter Text');}
});
</script>

Dynamically add rows to a bootstrap table that has a form ;

I have a bootstrap table like this . Now i want this table to add two rows after clicking of a button and still have the form functionality that is that i should be able to able a unique name for the table colums to be able to read this in my controller . All the solutions i have seen don't maintain the unique name for the added rows . How can i do this ?
<form class="form-horizontal" role="form" action="updateCategory" method=POST>
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<tr>
<th style="width:15%" >Property</th>
<th style="width:40%">Present Value</th>
<th style="width:45%">Edited Value</th>
</tr>
<tr>
<td align="center"><strong>Id</strong></td>
<td><p class="text-danger" id="id1">Id</p></td>
<td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id"></td>
</tr>
<tr>
<td align="center"><strong>Cat Key</strong></td>
<!-- <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey"></td> -->
<td><p class="text-danger" id="catKey1">Cat Key</p></td>
<td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey"></td>
</tr>
<tr>
<td align="center"><strong>Name</strong></td>
<td><p class="text-danger" id="name1">Name</p></td>
<td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
</tr>
<tr>
<td align="center"><strong>Icon</strong></td>
<td><p class="text-danger" id="icon1">Icon</p></td>
<td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
</tr>
<tr>
<td align="center"><strong>Icon White</strong></td>
<td><p class="text-danger" id="iconWhite1">Icon White</p></td>
<td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
</tr>
<tr>
<td align="center"><strong>Color</strong></td>
<td><p class="text-danger" id="color1">Color</p></td>
<td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
</tr>
<tr>
<td align="center"><strong>Post Order Success Message</strong></td>
<td><p class="text-danger" id="posm1">Post Order Success Message</p></td>
<td><input type="text" class="form-control" id="posm" name="posm" placeholder="Enter Post Order Success Message"></td>
</tr>
<tr>
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
`