We Keep Coding

Multiple dropdown in same React component is not working

I have used two dropdown from mdbootstrap https://mdbootstrap.com/docs/jquery/components/dropdowns/
But both the dropdown has same dropdown items why so? In console -> source I am able to see different options but while displaying it is not shown why so? In below screenshots you can see dropdown items for both are same why is this happening? I am not able to debug this because in console -> source also it show shopping, travel etc but it is not displaying in dropdown why so?
code:
import React from "react";
import "./transaction.css";
const Transaction = () => {
return (
<div className="transactionContainer">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Transaction Information</strong>
</h5>
<div class="card">
<div class="card-body px-lg-5 pt-0">
<form class="text-center" style={{ color: "#757575" }} action="#!">
<div class="md-form">
<input type="text" id="amount" class="form-control" />
<label for="amount">Amount</label>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Category
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Shopping
</a>
<a class="dropdown-item" href="#">
Travel
</a>
<a class="dropdown-item" href="#">
Entertainment
</a>
</div>
<button
class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
type="submit"
>
Add transaction
</button>
</form>
</div>
</div>
</div>
);
};
export default Transaction;
Screenshots:

Each dropdown needs to be wrapped inside a div with class of dropdown like this:
<div className="dropdown">
<button
class="btn btn-primary dropdown-toggle mr-4"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Payment Method
</button>
<div id="menu1" class="dropdown-menu">
<a class="dropdown-item" href="#">
Cash
</a>
<a class="dropdown-item" href="#">
Debit/Credit Card
</a>
<a class="dropdown-item" href="#">
Net Banking
</a>
</div>
</div>

Javascript code not working on Laravel Header file

I am working on a Laravel project and there is a login modal inside the project which logs the user in but if the user enters invalid data then I want the modal to pop up automatically with the error message.
I am using this script code but it is not working.No J code is working on the header.blade.php file
<script type="text/javascript">
#if (count($errors) > 0)
$('#login-modal').modal('show');
#endif
</script>
My header.blade.php File is:
<header id="header" class="header-scroll top-header headrom">
<!-- .navbar -->
<nav class="navbar navbar-dark">
<div class="container tog">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#mainNavbarCollapse">☰</button>
<a class="navbar-brand" href="{{url('/')}}"> <img class="img-rounded" src="images/logo.png" alt=""> </a>
<ul class="nav navbar-nav" id="location-top">
<li class="nav-item dropdown" id="nav-float">
<a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-cutlery" aria-hidden="true"></i> FEEL LIKE EATING
</a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html"><img src="images/bbq.png"> BB.Q</a>
<a class="dropdown-item" href="map_results.html"><img src="images/beef.png"> Beef Roast</a>
<a class="dropdown-item" href="food_results.html"><img src="images/carrot.png"> Carrot Juice</a>
<a class="dropdown-item" href="map_results.html"><img src="images/cheese-burger.png"> Cheese Burger</a>
<a class="dropdown-item" href="food_results.html"><img src="images/turkey.png"> Chicken Roast</a>
<a class="dropdown-item" href="map_results.html"><img src="images/noodles.png"> Chinese Soup</a>
<a class="dropdown-item" href="food_results.html"><img src="images/frappe.png"> Cold Coffee</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-map-marker" aria-hidden="true"></i> CHOOSE LOCATION </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="food_results.html">Location 1</a><a class="dropdown-item" href="map_results.html">Location 2</a>
<a class="dropdown-item" href="food_results.html">Location 3</a>
<a class="dropdown-item" href="map_results.html">Location 4</a>
<a class="dropdown-item" href="food_results.html">Location 5</a>
<a class="dropdown-item" href="map_results.html">Location 6</a>
<a class="dropdown-item" href="food_results.html">Location 7</a>
<a class="dropdown-item" href="map_results.html">Location 8</a>
</div>
</li>
<li class="nav-item dropdown" id="nav-float-2"> <a style="color: white;" class="nav-link dropdown-toggle btn btn-danger warning-btn" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars" aria-hidden="true"></i> Menu </a>
<div class="dropdown-menu scrollable-menu" role="menu">
<a class="dropdown-item" href="{{url('/chefs')}}"><img src="images/chef.png"> Chefs</a>
<a class="dropdown-item" href="#"><img src="images/about-us.png"> About Us</a>
<a class="dropdown-item" href="#"><img src="images/letter.png"> Contact Us</a>
<a class="dropdown-item" href="#"><img src="images/question.png"> FAQ's</a>
</div>
</li>
</ul>
<div class="collapse navbar-toggleable-md" id="mainNavbarCollapse">
<ul class="nav navbar-nav float-lg-right">
#guest
<li class="nav-item"> <a class="nav-link active" data-toggle="modal" data-target="#login-modal" href="#"><i class="fa fa-user-o" aria-hidden="true"></i>LOGIN / REGISTER</a> </li>
<li class="nav-item"> <a style="color: white;" class="nav-link btn btn-danger" href="#">REGISTER AS A CHEF</a> </li>
#else
<li class="dropdown">
<a style="border-radius: 20px;" href="#" class="dropdown-toggle btn btn-danger" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="drop-outside"><a href="/customer/home">
<i class="fa fa-user" aria-hidden="true"></i>
View Profile
</a>
</li>
<li class="drop-outside">
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
<i class="fa fa-sign-out" aria-hidden="true"></i>
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<!-- /.navbar -->
</header>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center">
<img class="img-circle center-block" id="img_logo" src="images/circle-logo.png">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="fa fa-times fa-2x" aria-hidden="true"></span>
</button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms">
<!-- Begin # Login Form -->
<form id="login-form" method="POST" action="{{ route('login') }}">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="fa fa-chevron-right"></div>
<span id="text-login-msg">Login to Continue..</span>
</div>
<br>
{{ csrf_field() }}
<input id="login_username" name="email" class="form-control" type="email" placeholder="Email" required>
<input id="login_password" name="password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<br>
#if ($errors->has('email'))
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('email') }}</strong>
</span>
#endif
#if ($errors->has('password')){
<script>
$(window).on('load',function(){
$('#login-modal').modal('show');
});
</script>
<span class="help-block">
<strong class="text-danger">{{ $errors->first('password') }}</strong>
</span>
#endif
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block login-btn">Login</button>
</div>
<div><p style="text-align: center; font-weight: bold; padding-top: 15px;">OR</p></div>
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End # Login Form -->
<!-- Begin | Lost Password Form -->
<form id="lost-form" style="display:none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="fa fa-chevron-right"></div>
<span id="text-lost-msg">Enter your email</span>
</div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link pull-right">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form -->
<!-- Begin | Register Form -->
<form id="register-form" style="display:none;" method="POST" action="{{ route('register') }}">
{{ csrf_field() }}
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="fa fa-chevron-right"></div>
<span id="text-register-msg">Register an account.</span>
</div>
<input id="name" name="name" class="form-control" type="text" placeholder="Username" required>
<input id="email" class="form-control" name="email" type="email" placeholder="E-Mail" required>
<input id="password" class="form-control" name="password"type="password" placeholder="Password" required>
<input id="password-confirm" class="form-control" name="password_confirmation" type="password" placeholder="Confirm Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-danger btn-md btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link pull-right">Log In</button>
</div>
</div>
</form>
<!-- End | Register Form -->
</div>
<!-- End # DIV Form -->
</div>
</div>
</div>
<!-- END # MODAL LOGIN -->
<script type="text/javascript">
#if (count($errors) > 0)
$('#login-modal').modal('show');
alert("Hello");
#endif
</script>
I am new to travel and I don't know what's wrong.Any help will be appreciated.

Assuming your JavaScript and jQuery is Correct and that you have Bootstrap JS installed.
You can do the follow which will run the script if any errors are detected
<script>
#if ($errors->any())
$('#exampleModal').modal('show');
#endif
</script>

How do I create Multiple bootstrap dropdown menus per page that don't interact with each other?

In the following code I use the first bootstrap dropdown to list a selection of items to show. Selecting one creates a bootstrap nav bar with two input fields, a check in field, another dropdown button and two additional buttons. I've put it together like you see in the below example.
The problem is the selection I make in the first dropdown appears in the second dropdown as the title, and that dropdown does not work to give the additional options.
I can't seem to find a way to keep the two dropdown button items from clashing, how can I make them independent of each other?
<div id="container">
<div id="select1" class="dropdown">
<button id="dpbutton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Select an Existing Net
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation">
Show All Stations in DB</li>
<li class="divider"></li>
<li role='presentation' class=' bg-success ' data-value="13"'>
<a href='#' role='menuitem' onclick = 'showActivities(13)'>
Item1
</a>
</li>
<li role='presentation' class=' bg-success ' data-value="12"'>
<a href='#' role='menuitem' onclick = 'showActivities(12)'>
Item2
</a>
</li>
</ul>
</div>
</div>
<nav id="admin" class=" hidden navbar navbar-inverse admin flashit roundit" role="navigation">
<div class=" container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<form class="navbar-form navbar-left">
<div class="form-group">
<input id="cs1" type="text" class="form-control" placeholder="Call Sign" tabindex=1 onkeyup="showHint(this.value);" maxlength="16" onmousedown="isKeyPressed(event)" autofocus />
<input id="Fname" type="text" class="form-control" placeholder="First Name" tabindex=2 onkeyup="nameHint(this.value);" onblur="checkIn();" />
</div>
</form>
<button id="ckin2" type="submit" class="btn btn-success" tabindex=3 >Check In</button>
<div class="btn-group">
<button id="showops" type="button" class="btn btn-secondary btn-sm dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Show/Hide
<span class="caret"></span>
</button>
<div class="dropdown-menu" role="menu" aria-labelledby="menu1">
<a role="menuitem" class="dropdown-item" href="#">Show Grid</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show eMail</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Lat/Lon</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show Last Name</a><br>
<a role="menuitem" class="dropdown-item" href="#">Show TOD</a>
</div>
</div>
<button id="time" class=" btn btn-info navbar-btn " type="button" onClick="TimeLine();" >Time Line</button>
<button id="closelog" class=" btn btn-danger navbar-btn closenet " type="button" value="Close Net" oncontextmenu="rightclickundotimeout();return false;">Close Net</button>
</div> <!-- end container fluid -->
</nav>
<ul id="txtHint"></ul>
<div id="netids"></div>
<br><br><br>
<div id="actLog" class="hidden">net goes here</div>

Bootstrap dropdown doesn't select

I have this code, but selection doesn't work.
<div class="input-group-btn">
<button id="entity" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Students
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Teachers</li>
<li>Classes</li>
</ul>
</div>
<input type="text" id="s" class="form-control" aria-label="..." oninput="f()">

Check this simplest Dropdown menu Dropdown Bootstrap
I am not sure what exactly you are trying to get though.

Keep Bootstrap dropdown button focused when even if clicked on input field

I am having a problem keeping bootstrap dropdown button focused when clicked(:focus) on the input field inside the dropdown.
<div id="select_btn">
<div class="btn-group">
<button class="btn btn-custom-select btn-group show-properties dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="select-p-text">Select a Property
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<div id="propertyHolder">
<div class="right-inner-addon">
<i class="fa fa-search"></i>
<input placeholder="Search for a property..." id="box" type="search" />
</div>
<li role="separator" class="divider"></li></div>
<li><ul class="selectList">
</ul>
</li>
</div>
</ul>
</div>