(HTML + JavaScript + BootStrap) Table With Delete Button Won't Show up - javascript

Correct Solution with different context |
My Solution, table won't show
I can't seem to figure out why my table won't show after I added a new column, any inputs?
Sorry if my code is a mess, I'm still learning. I had to tweak my professors lecture examples to figure this out
$(document).ready(function() {
$('#AddSaleButton').click(function() {
var PlayerName = $('#PlayerName').val();
var Goals = parseInt($('#GoalNum').val());
var Assists = parseInt($('#AssistQuantity').val());
$('#OrderTable tbody').append('<tr><td>' + PlayerName + '</td><td>' + Goals + '</td><td>' + Assists + '</td><td></td><td><button class="btn btn-sm btn-danger DeleteRow" data-product="' + PlayerName + '" data-quantity="' + Goals + 'data-assist="' + Assists + '>Delete Order</button></td></tr>');
switch (PlayerName) {
case "Erling":
var EachPlayerSum = parseInt($('#ETotal').text());
EachPlayerSum = EachPlayerSum + Goals + Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone + Goals + Assists;
$('#ETotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Phil":
var EachPlayerSum = parseInt($('#PTotal').text());
EachPlayerSum = EachPlayerSum + Goals + Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone + Goals + Assists;
$('#PTotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Jack":
var EachPlayerSum = parseInt($('#JTotal').text());
EachPlayerSum = EachPlayerSum + Goals + Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone + Goals + Assists;
$('#JTotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
}
$('AddSaleModal').modal('hide');
$('#AddOrderToast').show();
$('#GoalNum').val('');
$('#AssistQuantity').val('');
$('#PlayerName').prop('selectedIndex', 0);
setTimeout(function() {
$('#AddOrderToast').hide();
}, 3000);
});
$(document).on('click', '.DeleteRow', function() {
var PlayerName = $(this).attr('data-product');
var Goals = parseInt($(this).attr('data-quantity'));
var Assists = parseInt($(this).attr('data-assist'));
switch (PlayerName) {
case "Erling":
var EachPlayerSum = parseInt($('#ETotal').text());
EachPlayerSum = EachPlayerSum - Goals - Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone - Goals - Assists;
$('#ETotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Phil":
var EachPlayerSum = parseInt($('#PTotal').text());
EachPlayerSum = EachPlayerSum - Goals - Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone - Goals - Assists;
$('#PTotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Jack":
var EachPlayerSum = parseInt($('#JTotal').text());
EachPlayerSum = EachPlayerSum - Goals - Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone - Goals - Assists;
$('#Jtotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
}
var tableRow = $(this).closest('tr'); //parent parent works too instead of closest
tableRow.remove();
$('#DeleteOrderToast').show();
setTimeout(function() {
$('#DeleteOrderToast').hide();
}, 3000);
});
});
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffca1c">
<meta name="mobile-web-app-capable" content="yes">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="script.js"></script>
<title>Manchester City Soccer Team</title>
</head>
<body class="bg-light">
<div class="container-lg mt-5">
<div class="row mb-3 text-center">
<h1>Manchester City Soccer Team</h1>
</div>
<div class="row mb-3 w-50 mx-auto">
<button class="btn btn-primary OpenSaleModal" data-bs-toggle="modal" data-bs-target="#AddSaleModal">Add Statistics</button>
</div>
<table class="table table-border table-hover table-sm= mb-5" id="OrderTable">
<thead>
<tr>
<th>Player's Name</th>
<th>Number of Goals</th>
<th>Number of Assists</th>
<th></th>
</tr>
</thead>
</table>
<div class="row d-flex flex-row justify-content-start text-center">
<div class="col-3">
<div class="card">
<div class="card-header">Erling Total</div>
<div class="card-body">
<div class="display-1 fw-bold" id="ETotal">0</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-header">Phil Total</div>
<div class="card-body">
<div class="display-1 fw-bold" id="PTotal">0</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-header">Jack Total</div>
<div class="card-body">
<div class="display-1 fw-bold" id="JTotal">0</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-header">Total Together</div>
<div class="card-body">
<div class="display-1 fw-bold" id="TotalEveryone">0</div>
</div>
</div>
</div>
</div>
</div>
<!-- TOASTS -->
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast align-items-center text-bg-success border-0" id="AddOrderToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex justify-content-between align-items-center">
<div class="toast-body fs-6">
You successfully added data!
</div>
<button type="button" class="btn-close pe-3" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast align-items-center text-bg-success border-0" id="DeleteOrderToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex justify-content-between align-items-center">
<div class="toast-body fs-6">
You successfully removed data!
</div>
<button type="button" class="btn-close pe-3" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<!-- Modal - Add Stats -->
<div class="modal fade" id="AddSaleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a New Statistic</h5>
<button type="button" id="CloseEditClientModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="PlayerName" class="form-label">Choose A Player</label>
<select class="form-select" aria-label="Default select example" id="PlayerName">
<option selected>Select from list...</option>
<option value="Erling">Erling Haaland</option>
<option value="Phil">Phil Foden</option>
<option value="Jack">Jack Grealish</option>
</select>
<div class="invalid-feedback">
Please select a Player.
</div>
</div>
<div class="mb-3">
<label for="GoalNum" class="form-label">Goals</label>
<input type="number" min="0" class="form-control" id="GoalNum">
<div class="invalid-feedback">
Please enter a Goal number.
</div>
<div class="mb-3">
<label for="AssistQuantity" class="form-label">Assists</label>
<input type="number" min="0" class="form-control" id="AssistQuantity">
<div class="invalid-feedback">
Please enter an Assist number.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="AddSaleButton">Save Statistics</button>
</div>
</div>
</div>
</div>
</body>
</html>
I've messed with the delete button, placement of lines of code, googling, changing and messing with the table. Can't find anything and I've talked to other struggling students. Same issue


your javascript is looking for <tbody> inside the table #OrderTable but it could't find it.
...
$('#OrderTable tbody').append(...)
...
solution:
...
<table class="table table-border table-hover table-sm= mb-5" id="OrderTable">
<thead>
<tr>
<th>Player's Name</th>
<th>Number of Goals</th>
<th>Number of Assists</th>
<th></th>
</tr>
</thead>
<tbody></tbody> <!-- 👈 add this line -->
</table>
...

Related

responsive datatables not working when we select data in dropdown

hello please help me guys to solve the problem i am facing. so here i want to insert data into datatables but using class and id because there is select function in it and in html i made an error but why error huh? it should be when we click on the data in the dropdown it will automatically appear in the table and the data will be automatically responsive`
'Use Strict';
$(document).ready(function () {
$('#tblLvl2Process').DataTable({
responsive: true,
"ordering": true,
"paging": true,
"info": true,
"bfilter": true,
"scrollx": false,
});
});
$("#selectMainProcess").change(function () {
var mainid = $(this).val();
var docid = $("#BPM_BPMDocNo").val();
var fusid = "" + mainid + "$" + docid + "";
$.ajax({
url: "/BPM/GetBPMCoreProcessList",
data: { sIdentifier: fusid },
type: "GET",
success: function (data) {
$("#selectCoreProcess").empty();
$("#selectLevel2Process").empty();
$.each(data, function (index, row) {
$("#selectCoreProcess").append("<option value ='" + row.CoreProcessCode + "'>" + row.CoreProcessText + "</ option>")
});
$('.selectpicker').selectpicker('refresh');
$(".allcorelist").hide();
$(".alllv2list").hide();
}
});
});
$("#selectCoreProcess").change(function () {
//hidden all row
$(".allcorelist").hide();
$(".alllv2list").hide();
//get core process id
var coreid = $(this).val();
var series = 1;
//dropdown level 2 type
var aListVal = [];
var aListText = [];
$("." + coreid + "").each(function () {
var codelv2 = $(this).find("#tdLevel2ProcessCode").text();
var textlv2 = $(this).find("#tdLevel2ProcessText").text();
aListVal.push(codelv2);
aListText.push(textlv2);
});
$("#selectLevel2Process").empty();
for (var i = 0; i < aListVal.length; i++) {
if (aListText[i] != "DELETE") {
$("#selectLevel2Process").append("<option value ='" + aListVal[i] + "'>" + aListText[i] + "</ option>")
}
}
$('.selectpicker').selectpicker('refresh');
//show selected
$("." + coreid + "").show();
//numbering
$.each($("." + coreid + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
});
$("#selectLevel2Process").change(function () {
//hidden all row
$(".alllv2list").hide();
//get core process id
var lv2proid = $(this).val();
var series = 1;
//show selected
$("." + lv2proid + "").show();
//numbering
$.each($("." + lv2proid + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
});
$("#btnSubmitNewLvl2P").click(function () {
var result;
result = $("#frmLv2P").valid();
if (result) {
var row;
$('a[href$="EDIT_Lv2P"]').off('click');
$('a[href$="DELETE_Lv2P"]').off('click');
if (sStateGridLvl2P == "-") {
var row = $('<tr id="' + $("#txtCode").val() + '" class="' + $("#txtMainCoreProcessCode").val() + ' allcorelist" >' +
'<td></td>' +
'<td class="num"></td>' +
'<td id="tdLevel2ProcessText">' + $("#txtLevel2Process").val() + '</td>' +
'<td id="tdLevel2ProcessDesc" style="white-space:pre-wrap">' + $("#txtDescription").val() + '</td>' +
'<td id="tdLevel2ProcessObj" style="white-space:pre-wrap">' + $("#txtObjective").val() + '</td>' +
'<td id="tdOtherEntity">' + $("#txtOtherEntityLv2P").val() + '</td>' +
'<td id="tdMainProcessCode" hidden>' + $("#txtMainProcessCode").val() + '</td>' +
'<td id="tdMainCoreProcessCode" hidden>' + $("#txtMainCoreProcessCode").val() + '</td>' +
'<td id="tdLevel2ProcessCode" hidden>' + $("#txtCode").val() + '</td>' +
'<td style="text-align:center;"><span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span></td>' +
'</tr>');
$("#tblLvl2Process tbody").append(row);
} else {
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[1].innerHTML = $("#txtLevel2Process").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[2].innerHTML = $("#txtDescription").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[3].innerHTML = $("#txtObjective").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[4].innerHTML = $("#txtOtherEntityLv2P").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[5].innerHTML = $("#txtMainProcessCode").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[6].innerHTML = $("#txtMainCoreProcessCode").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[7].innerHTML = $("#txtCode").val();
$("#tblStoreOtherEntityLv2P tbody").find("#" + $("#txtCode").val() + "").find("#tdOtherEntity").text($("#txtOtherEntityLv2P").val());
$.each($("." + $("#txtCode").val() + ""), function () {
var paramIME = $("#txtOtherEntityLv2P").val();
if (paramIME == "YES") {
$(this).find("#tdOtherEntity").html($("#txtOtherEntityLv2P").val());
}
});
}
$('a[href$="EDIT_Lv2P"]').on('click', function (e) {
e.preventDefault();
GoEditLv2P($(this));
});
$('a[href$="DELETE_Lv2P"]').on('click', function (e) {
e.preventDefault();
var thisvar = $(this);
BootstrapDialog.show({
title: 'CONFIRMATION',
message: 'Apakah anda yakin akan menghapus data ini ?',
type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
buttons: [{
label: 'YES',
cssClass: 'btn-primary',
action: function (dialogItself) {
GoRemoveLv2P(thisvar);
dialogItself.close();
}
}, {
label: 'NO',
cssClass: 'btn-danger',
action: function (dialogItself) {
dialogItself.close();
}
}]
});
});
var series = 1;
$.each($("." + $("#txtMainCoreProcessCode").val() + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
$("#tblLvl2Process").trigger('footable_collapse_all').trigger('footable_redraw');
$("#ModalLevel2Process").modal('hide');
//change dropdown level 2 process
var coreid = $("#selectCoreProcess").val();
var aListVal = [];
var aListText = [];
$("." + coreid + "").each(function () {
var codelv2 = $(this).find("#tdLevel2ProcessCode").text();
var textlv2 = $(this).find("#tdLevel2ProcessText").text();
aListVal.push(codelv2);
aListText.push(textlv2);
});
$("#selectLevel2Process").empty();
for (var i = 0; i < aListVal.length; i++) {
if (aListText[i] != "DELETE") {
$("#selectLevel2Process").append("<option value ='" + aListVal[i] + "'>" + aListText[i] + "</ option>")
}
}
$('.selectpicker').selectpicker('refresh');
sStateGridLvl2P = "-";
$("#txtLevel2Process").val("");
$("#txtDescription").val("");
$("#txtObjective").val("");
$("#txtMainProcessCode").val("");
$("#txtMainCoreProcessCode").val("");
$("#txtCode").val("");
$("#txtOtherEntityLv2P").val("");
$("#ModalLevel2Process").modal('hide');
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>#ViewData["Title"] - Standard Template 2020</title>
<!-- favicon -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body class="fixed-sn kalbe-skin">
<!-- Page Wrapper -->
<div class="preloader">
<div class="loading">
<img src="~/Image/1200px-Kalbe_Farma.svg.gif" width="200">
<p class="text-center pt-4 ml-4" style="font-size : 15px; font-weight : 500;">
Loading...
</p>
</div>
</div>
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary shadow-lg sidebar sidebar-dark accordion" id="accordionSidebar" style="margin: 0px; ">
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<header>
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class=" d-md-none rounded-circle border-0 mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="border-0 toggel-nav" id="sidebarToggle">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Topbar Navbar -->
<ul class="nav navbar-nav nav-flex-icons ml-auto" id="NavbarTop">
</ul>
</nav>
<!-- End of Topbar -->
</header>
<!-- Begin Page Content -->
<div class="container-fluid box">
<!--Main Layout-->
<main role="main" class="pb-3">
<div class="container-fluid">
<div class="shadow-sm tbl-1 p-3 mb-5" style="background : #F1F1F1;">
<div class="text-left text-table">
<h3 class="ml-2 mt-2" id="labelHeader">List Operational Risk</h3>
<div class="d-flex flex-row">
<div class="p-2">
<div class="form-group selct-kalbe" id="searchEntity">
<div class="" id="labelEntity">
<label for="selectSearchEntity">ENTITY</label>
</div>
<select class="form-control input-sm" id="selectSearchEntity" data-live-search="true" data-size="10" data-width="100%">
#foreach (var item in ListEntity)
{
<option value="#item.Value">#item.Text</option>
}
</select>
</div>
</div>
<div class="p-2 mt-4 pt-3 portfolio-item" id="labelDocNo" hidden>
<div class="form-group" style="float:right">
<label class="control-label" for="selectSearchDocNo">Doc No: </label>
</div>
</div>
<div class="p-2 mt-4 pt-3 portfolio-item" id="searchDocNo" hidden>
<div class="form-group">
<div>
<input class="form-control input-sm text-box single-line" id="selectSearchDocNo" type="text">
</div>
</div>
</div>
<div class="p-2 mt-4 pt-3">
<button type="submit" id="btnReload" class="btn btn-sm btn-kalbe"><span class="glyphicon glyphicon-repeat"></span> Reload</button>
</div>
</div>
<div class="row" style="margin-left : -7px;">
<div class="col-md-4 col-sm-12">
<input placeholder="Search" class="form-control input-sm" style="border-radius : 20px" type="text" id="ListOPR" aria-label="Search">
</div>
</div>
<div class="searchFilter row pt-3" style="margin-left : -7px;">
<div class="col-md-4 col-sm-12">
<div class="form-group" id="selectSearchEntity">
<div class="" id="">
<label for="selectSearchEntity">TABLE FILTER</label>
</div>
<select class="mdb-select colorful-select dropdown-primary md-form" multiple id="searchFilterSelect" style="border-radius : 20px" data-size="10" data-width="100%" onchange="filterColumnOnChange()">
<option value="DocNo">Doc. No.</option>
<option value="RefDoc">Ref. Doc. No</option>
<option value="Entity">Entity</option>
<option value="Process">Process</option>
<option value="LastUpdate">Last Update</option>
<option value="LastRevisit">Last Revisit Status</option>
</select>
<button type="button" id="btnSelectAll" class="btn btn-sm btn-primary" onclick="SelectAll()"><span class="glyphicon glyphicon-ok"></span> SELECT</button>
<button type="button" id="btnRemove" class="btn btn-sm btn-danger" onclick="RemoveFilter()"><span class="glyphicon glyphicon-remove"></span> REMOVE ALL</button>
</div>
</div>
</div>
<div class="d-flex flex-row mt-4 ml-1">
<div class="p-2">
<button id="PICProcessInput" type="button" class="btn btn-sm btn-default btn-arrow-right rounded-pill" title="PIC Process Input">0/0</button>
</div>
<div class="p-2">
<button id="SuperiorPICProcessInput" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Superior PIC Process Review">0/0</button>
</div>
<div class="p-2">
<button id="PICRMReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC RM Review">0/0</button>
</div>
<div class="p-2">
<button id="PICSBUReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC SBU Review">0/0</button>
</div>
</div>
<div class="d-flex flex-row mt-4 ml-1">
<div class="p-2">
<button id="PICRADevReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC RA Dev Review">0/0</button>
</div>
<div class="p-2">
<button id="HeadEntityReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Head Entity Review">0/0</button>
</div>
<div class="p-2">
<button id="Approved" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Review">0/0</button>
</div>
</div>
<div class="row mt-5">
<div class="col-md-3">
<button type="button" id="btnExportLMRModal" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export List Mandatory Risk</button>
</div>
<div class="col-md-3" style="margin-right: 37px;">
<button type="button" id="btnExportLRAA" class="btn btn-warning btn-sm" style="margin-right:20px"><span class="glyphicon glyphicon-save-file"></span> Export List Risk Above Tolerance</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportURR" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export Updated Risk Register</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportLOR" class="btn btn-warning btn-sm" style="margin-right:0px"><span class="glyphicon glyphicon-save-file"></span> Export List Operational Risk</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportLKR" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export List Key Risk</button>
</div>
<div class="col-md-3">
<button type="button" id="btnNewOR" class="btn btn-primary btn-sm divbtnNew" style="margin-right:10px; display:none"><span class="glyphicon glyphicon-file"></span> New Operational Risk</button>
</div>
</div>
</div>
#{Html.RenderPartial("Loading");}
<div class="card card-custom">
<!-- Editable table -->
<div class="card ">
<div class="card-body">
<!-- Collapse buttons -->
<!-- / Collapse buttons -->
<div class="row">
<div class="col-sm-10 col-md-12 col-lg-12 col-xs-12 col-12">
<div id="divTblListOR" class="table-responsive" style="overflow: hidden;">
<table id="tblListOR" class="table table-striped table-condensed text-left display responsive nowrap text-left" width="100%">
<thead>
<tr>
<th class="theadCollapse">Collapse</th>
<th>No</th>
<th class="theadDocNo">Doc. No.</th>
<th class="theadRefDoc">Ref. Doc. No</th>
<th class="theadEntity">Entity</th>
<th class="theadProcess">Process</th>
<th class="theadLastUpdate">Last Update</th>
<th class="theadLastRevisit">Last Revisit Status</th>
#*
<th>Supporting Document</th>*#
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Editable table -->
</div>
</div>
</div>
</main>
<!--Main Layout-->
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer page-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<a>© 2020 - Standard Template 2020 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</body>
</html>

There are methods for DataTable() that take care of what you want to do. Note that I have changed the IDs for the new table row TD elements into classnames - because you shouldn’t duplicate id’s. Rather than do inline styles, set up a new classname prewrap
<style>
.prewrap{
white-space: pre-wrap;
}
</style>
Somewhere at the top of your script, get a reference for the DT
const t = $('#tblLvl2Process').DataTable();
and in your loop:
// to replace your TR insert in your loop -- insert the data
t.row.add( [
"",
"",
$("#txtLevel2Process").val(),
$("#txtDescription").val(),
$("#txtObjective").val(),
$("#txtOtherEntityLv2P").val(),
$("#txtMainProcessCode").val(),
$("#txtMainCoreProcessCode").val(),
$("#txtCode").val(),
'<span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span>'
] ).node();
// add id and class to the tr
t.id = $("#txtCode").val();
t.addClass(' + $("#txtMainCoreProcessCode").val() + ' allcorelist')
// now the tds
$(t).find('td').eq(1).addClass('num');
$(t).find('td').eq(2).addClass('tdLevel2ProcessText');
$(t).find('td').eq(3).addClass('tdLevel2ProcessDesc prewrap');
$(t).find('td').eq(4).addClass('tdLevel2ProcessObj prewrap');
$(t).find('td').eq(5).addClass('tdOtherEntity');
$(t).find('td').eq(6).addClass('tdMainProcessCode');
$(t).find('td').eq(7).addClass('tdMainCoreProcessCode');
$(t).find('td').eq(8).addClass('tdLevel2ProcessCode');
t.draw( false );
I can't test this, but that should take care of it.

How to get the text value in a div html by clicking on button

I want to get the text between the div tag by clicking on the button event
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> 7000
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> 15000
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button
How can I achieve that.

Try
$(".price-footer .btn").on( "click", function(event) {
const parent = $(this).parents('.pricing-table');
const priceText = $('.price', parent).text().trim();
const priceParts = priceText.split(' ');
console.log(`priceText: ${priceParts[1]}`);
// Output: "priceText: 12000"
const permonthText = $('.permonth', parent).text().trim();
console.log(`permonthText: ${permonthText}`);
// Output: "permonthText: 6 Months"
});
Demo - https://codepen.io/vyspiansky/pen/MWybEEr

You can add ids to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.
Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.
const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, ''))
const month = document.getElementById("month-info").innerText
console.log(dollarAmount)
console.log(month)
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div id="dollar-info" class="price text-primary">
<span class="dollar">&#8377</span>12000.80
</div>
<span id="month-info" class="permonth">6 Months</span>
</div>

Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below
$(document).ready(function(){
$('.pricing-table').each(function(){
var $table = $(this);
$table.on('click', '.btn-primary', function(){
var price = $table.find('.price').text().trim();
var permonth = $table.find('.permonth').text().trim();
alert("price is " + price + " for " + permonth);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>

There are so many options to do this. Here is my example with the snippet and code sandbox.
// jquery
const findValues = (target, value) => target.parents().eq(1).find(value);
$(document).on("click", ".btn", (e) => {
const $target = $(e.target);
// dollar is optional
const $dollar = findValues($target, ".dollar");
const $value = findValues($target, ".value");
const $month = findValues($target, ".permonth");
$("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`);
});
// // vanilla js
const test1 = document.querySelector("#test1");
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", ({ target }) => {
const nodes = target.parentNode.parentNode;
const dollar1 = nodes.querySelector(".dollar");
const value1 = nodes.querySelector(".value");
const month1 = nodes.querySelector(".permonth");
test1.innerText = `${dollar1.textContent} ${value1.textContent} ${month1.textContent}`;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> <span class="value">7000</span>
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> <span class="value">12000</span>
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> <span class="value">15000</span>
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div id="test"></div>
<div id="test1"></div>
https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js

My question is about getting a solution to calculate the total price of an order with javascript

I'm developping a web page were there is some products in their prices and the quantity of each one, what I'm trying to do, is to calculate the total price, but, with the same class name for every product
I've already tried the solution in the code bellow, but I'm not getting the right price
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_newyork_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">New York City</p>
<p class="font-italic">Quantité : <span class="qte">1</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_londres_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">Londres City</p>
<p class="font-italic">Quantité : <span class="qte">3</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
</ul>
<script type="text/javascript>
const qte = document.querySelectorAll('.qte');
const prix = document.querySelectorAll('.prix');
const prixPanier = document.querySelector('#prixPanier');
const TVA = document.querySelector('#TVA');
const Total = document.querySelector('#Total');
let prixTotal = 0;
for(let i=0; i < qte.length; i++){
prixTotal = prixTotal + (parseInt(qte[i].innerText)* parseFloat(prix[i].innerText));
}
prixPanier.innerText = prixTotal;
TVA.innerText = prixTotal * 0.15;
</script>
So what I'm looking for, is the right solution also for my last question, How can i add the total and the TVA so i can get the final or the total price ?

When you are working with numbers that contain symbols that are not detected or parsed with JavaScript internal functions, you should make sure to avoid those problems by simply removing the symbol before parsing anything.
This is how the code working looks like:
for(let i=0; i < qte.length; i++){
let price = parseFloat(prix[i].innerText.replace('€','').replace(',','.')),
quantity = parseInt(qte[i].innerText);
prixTotal += (quantity*price);
}
Also, it has kind of a better readability. I'll leave you a
Fiddle so you can check if it is giving your desired output:
https://jsfiddle.net/y0x84rwq/

You have some issues:
the price contain comma, need convert to dot before use.
let price = parseFloat(prix[i].innerHTML.replace(/,/g, '.')).toFixed(2);
This is worked code:
const qte = document.querySelectorAll('.qte');
const prix = document.querySelectorAll('.prix');
const prixPanier = document.querySelector('#prixPanier');
const TVA = document.querySelector('#TVA');
const Total = document.querySelector('#Total');
let prixTotal = 0.0;
for(let i=0; i < qte.length; i++){
let price = parseFloat(prix[i].innerText.replace(/,/g, '.')).toFixed(2);
//console.log(price)
prixTotal = prixTotal + (parseInt(qte[i].innerHTML)* price);
}
prixPanier.innerText = prixTotal;
TVA.innerText = prixTotal * 0.15;
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_newyork_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">New York City</p>
<p class="font-italic">Quantité : <span class="qte">1</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-4">
<img src="../img/produit_londres_0.jpeg" class="img-fluid float-left mr-5" width="80" height="60"/>
</div>
<div class="col-md-4">
<p class="mb-auto">Lego Architecture</p>
<p class="font-weight-bold">Londres City</p>
<p class="font-italic">Quantité : <span class="qte">3</span></p>
</div>
<div class="col-md-4">
<h4 class="text-right prix">49,99€</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-outline-danger btn-sm float-right">Supprimer <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</li>
</ul>
<div id="prixPanier"></div>
<div id="TVA"></div>

How to hide database record on click of button using jquery

I have a view where I am fetching database records in form of bootstrap card. In the each card I have checkboxes which are associated with a database column.
On checking the checkboxes and clicking of the save button I want to hide the card with that record in which I enter that value
How can I achieve this? I tried with the class name of the card but it is hiding all the cards.
$('.insert').click(function() {
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked').length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked').length,
NewLin: $('input[data-nlid=' + rId + ']:checked').length,
DpClean: $('input[data-dcid=' + rId + ']:checked').length
});
$('.Resbook').hide();
});
#model IEnumerable
<RoomTypeView>
<div class="row">
#foreach (var item in Model)
{
<div class="col-3">
<div class="card border rounded DropShadow Resbook">
<div class="card-body">
Room #Html.DisplayFor(modelItem => item.RoomNo)
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button><br />
#Html.DisplayFor(modelItem => item.GuestName)<br />
<div class="row">
<div class="col-7 text-center">
#if (item.Status.HasFlag(EnumHkStatus.Cleaning))
{
<input type="checkbox" data-Cleanid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Cleaning</label>
<br />
}
#if (item.Status.HasFlag(EnumHkStatus.InventoryCheck))
{
<input type="checkbox" data-InvChkid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Inventory Check</label>
}
</div>
<div class="col-5">
#if (item.NewLinen == null)
{
<input type="checkbox" data-nlid="#item.RoomId" class="form-check-input" />
<label>New Linen</label>
<br />
}
#if (item.DeepCleaning == null)
{
<input type="checkbox" data-dcid="#item.RoomId" class="form-check-input" />
<label>Deep Cleaning</label>
}
</div>
</div>
<div class="row">
<div class="col-8">
<div class="inventory my-1">
<textarea class="form-control breakage" placeholder="Enter Breakage Note" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default breakage" data-brid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="comments my-1">
<textarea class="form-control inventoryms" placeholder="Enter Inventory Missing" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default invmissing" data-invmid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
#Html.DisplayFor(modelItem => item.Comments)
</div>
</div>
</div>
}
</div>
This $('.Resbook').hide(); is hiding all the cards. How to overcome this? How can I can use that rId to hide that particular card?

it is hiding all the cards
You need to ensure only the related card is hidden. The .insert button is within a .card so you can find the .card it's within using .closest and then use relative finds.
var card = $(this).closest(".card");
$('input[data-invchkid=' + rId + ']:checked', card)
or
card.find('input[data-invchkid=' + rId + ']:checked')
As the .card is also .Resbook (<div class='card Resbook'>) you can use .Resbook instead of .card, eg:
var card = $(this).closest(".Resbook");
$(card).hide();
Giving:
$('.insert').click(function() {
var card = $(this).closest(".card");
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked', card).length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked', card).length,
NewLin: $('input[data-nlid=' + rId + ']:checked', card).length,
DpClean: $('input[data-dcid=' + rId + ']:checked', card).length
});
$(card).hide();
});
Example snippet showing use of .closest() using OPs structure:
$(".insert").click(function() {
$(this).closest(".card").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 1
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 2
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
In the case where the button is not inside the hierarchy of the card to be used, they can be linked together via their data-rid= values.
Add the .data-rid to the .card so that they match:
<div class='card' data-rid='#item.RoomId'/>
then match the two with
$("button").click(function() {
var rid = $(this).data("rid");
var card = $(".card[data-rid=" + rid + "]")
Example snippet:
$(".external-insert").click(function() {
var rid = $(this).data("rid")
var card = $(".card[data-rid=" + rid + "]")
card.hide();
$(this).fadeOut(); // also hide the button
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="1">
<div class="card-body">
Room 1
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="2">
<div class="card-body">
Room 2
</div>
</div>
</div>
</div>
<hr/>
<button type="button" class="btn btn-default insert external-insert" data-rid="1">Save 1</button>
<button type="button" class="btn btn-default insert external-insert" data-rid="2">Save 2</button>

On one button click event for three pages

I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}

You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed

If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>

Categories