Two sidenav on one page works only one

I want to have two sidebars on my page one on left side other on right side. But if I put both on one page both buttons work but opens only one side nav. They execute only second JavaScript. What I need is that left side button open left side menu and right side menu button open right side menu. But now I have that both menu buttons opens only one side. I used different classes in both menus. I can't find any solution.

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
//For second nav
function openNav() {
  document.getElementById("mySidebar2").style.width = "250px";
  document.getElementById("main2").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar2").style.width = "0";
  document.getElementById("main2").style.marginLeft= "0";
}

/*Left nav*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  left:-30px;
  transform: rotate(-90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn:hover {
  background-color: #f3a148;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}
.fa-address-card, .fa-coins, .fa-grin-alt, .fa-envelope{
	position: relative;
	top: 41px;
	left: 5px;
	font-size: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
/*right nav------*/
*{
margin: 0;
padding: 0;
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar2 {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #f3a148;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar2 a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #000000;
  display: block;
  transition: 0.3s;
}

.sidebar2 a:hover {
  color: #f1f1f1;
}

.sidebar2 .closebtn2 {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn2 {
  font-size: 16px;
  cursor: pointer;
  background-color: #f4b36d;
  color: #000000;
  padding: 10px 15px;
  border: none;
  position: fixed;
  top: 50%;
  right: -30px;
  transform: rotate(90deg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.openbtn2:hover {
  background-color: #f3a148;
}

#main2 {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<footer class="container-fluid footPos">
      <div class="row footer">
        <div class="col-sm-2">
        <!-- right sidenav -->
            <div id="mySidebar2" class="sidebar2">
                <a href="javascript:void(0)" class="closebtn2" onclick="closeNav()">×</a>
                <i class="far fa-address-card"></i><a href="#">Link</a>
                <i class="fas fa-coins"></i><a href="#">Link</a>
                <i class="far fa-grin-alt"></i><a href="#">Link</a>
                <i class="far fa-envelope"></i><a href="#">Link</a>
            </div>
            <div id="main2">
                <button class="openbtn2" onclick="openNav()">☰ Meniu</button>  
            </div>
        <!-- right sidenav end -->
        </div>
        <div class="col-sm-8">
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
            <h4 class="footTxt">Link</h4>
        </div>
		<div class="col-sm-2">
			<!--left side -->
			<div id="mySidebar" class="sidebar">
				<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
				<i class="far fa-address-card"></i><a href="#">Apie mus</a>
				<i class="fas fa-coins"></i><a href="#">Paslaugos</a>
				<i class="far fa-grin-alt"></i><a href="#">Klientai</a>
				<i class="far fa-envelope"></i><a href="#">Kontaktai</a>
			</div>
			<div id="main">
				<button class="openbtn" onclick="openNav()">☰ Meniu</button>  
			</div>

			<!--left side end-->
		</div>
	  </div> 
</footer>

I wish to make both buttons to work properly.

Solution

You are using the same function openNav for both button. you can fix the issue by passing the navid in the parameter and can use this parameter in getElementById to show hide nav.

See below the working code.

        function openNav(sidebarId, main) {
            document.getElementById(sidebarId).style.width = "250px";
            document.getElementById(main).style.marginLeft = "250px";
        }

        function closeNav(sidebarId, main) {
            document.getElementById(sidebarId).style.width = "0";
            document.getElementById(main).style.marginLeft = "0";
        }

       /*Left nav*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Lato", sans-serif;
        }
        
        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #f3a148;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }
        
        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar a:hover {
            color: #f1f1f1;
        }
        
        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        .openbtn {
            font-size: 16px;
            cursor: pointer;
            background-color: #f4b36d;
            color: #000000;
            padding: 10px 15px;
            border: none;
            position: fixed;
            top: 50%;
            left: -30px;
            transform: rotate(-90deg);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .openbtn:hover {
            background-color: #f3a148;
        }
        
        #main {
            transition: margin-left .5s;
            padding: 16px;
        }
        
        .fa-address-card,
        .fa-coins,
        .fa-grin-alt,
        .fa-envelope {
            position: relative;
            top: 41px;
            left: 5px;
            font-size: 20px;
        }
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
            .sidebar a {
                font-size: 18px;
            }
        }
        /*right nav------*/
        
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Lato", sans-serif;
        }
        
        .sidebar2 {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            right: 0;
            background-color: #f3a148;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }
        
        .sidebar2 a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            transition: 0.3s;
        }
        
        .sidebar2 a:hover {
            color: #f1f1f1;
        }
        
        .sidebar2 .closebtn2 {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
        }
        
        .openbtn2 {
            font-size: 16px;
            cursor: pointer;
            background-color: #f4b36d;
            color: #000000;
            padding: 10px 15px;
            border: none;
            position: fixed;
            top: 50%;
            right: -30px;
            transform: rotate(90deg);
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .openbtn2:hover {
            background-color: #f3a148;
        }
        
        #main2 {
            transition: margin-left .5s;
            padding: 16px;
        }
        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }
            .sidebar a {
                font-size: 18px;
            }
        }

<footer class="container-fluid footPos">
        <div class="row footer">
            <div class="col-sm-2">
                <!-- right sidenav -->
                <div id="mySidebar2" class="sidebar2">
                    <a href="javascript:void(0)" class="closebtn2" onclick="closeNav('mySidebar2', 'main2')">×</a>
                    <i class="far fa-address-card"></i><a href="#">Link</a>
                    <i class="fas fa-coins"></i><a href="#">Link</a>
                    <i class="far fa-grin-alt"></i><a href="#">Link</a>
                    <i class="far fa-envelope"></i><a href="#">Link</a>
                </div>
                <div id="main2">
                    <button class="openbtn2" onclick="openNav('mySidebar2', 'main2')">☰ Meniu</button>
                </div>
                <!-- right sidenav end -->
            </div>
            <div class="col-sm-8">
                <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
                <h4 class="footTxt"><a href="#" class="footLink">Link</a></h4>
                <h4 class="footTxt">Link</h4>
            </div>
            <div class="col-sm-2">
                <!--left side -->
                <div id="mySidebar" class="sidebar">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav('mySidebar', 'main2')">×</a>
                    <i class="far fa-address-card"></i><a href="#">Apie mus</a>
                    <i class="fas fa-coins"></i><a href="#">Paslaugos</a>
                    <i class="far fa-grin-alt"></i><a href="#">Klientai</a>
                    <i class="far fa-envelope"></i><a href="#">Kontaktai</a>
                </div>
                <div id="main">
                    <button class="openbtn" onclick="openNav('mySidebar', 'main2')">☰ Meniu </button>
                </div>
                <!--left side end-->
            </div>
        </div>
    </footer>