How can I add 2 buttons that are in different div to each other?

Question

How can I add 2 buttons next to each other? My problem is that they are in 2 different div. I'm trying to put float in the btn-group, but when I do it, the dropdown didn't work if I want to see the 2nd div which is hided and the animation not the same. How can I solve this? I want to add the Add and the View button next to each other.

Demo

 window.onload = function() { document.getElementById('hucontainer').style.display = 'none'; }; $('#divNewNotificationsRole-admin li').on('click', function() { $('#role-admin').html($(this).find('a').html()); }); // View dropdown // If the first dropdown element is selected, hide the second element and the dropdown list $('#role').click(function(e){ e.preventDefault(); // Select dropdown element without reloading the page var hu=document.getElementById("hucontainer"); var dropdowns = document.getElementsByClassName("dropdown-menu"); hu.style.display='none'; $("#rolecontainer").show("slow", function(){ }); dropdowns.style.display='none'; }); $('#relation').click(function(e){ e.preventDefault(); var role=document.getElementById("rolecontainer"); var dropdowns = document.getElementsByClassName("dropdown-menu"); $("#hucontainer").show("slow", function(){ }); role.style.display='none'; dropdowns.style.display='none'; }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div align="right" class="dropdown"> <button class="btn btn-primary dropdown-toggle btn-md" type="button" data-toggle="dropdown"><i class="fa fa-user"></i> Admin <span class="caret"></span> </button> <div class="dropdown-menu"> <li><a class="dropdown-item" href="#logout" data-toggle="modal">Logout <i class="fa fa-sign-out"></i></a></li> <li><a class="dropdown-item" href="#changepass" data-toggle="modal">Change Pass <i class="fa fa-undo"></i></a></li> </div> </div> <div class="btn-group" id="divNewNotificationsRole-admin"> <button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> View</button> <div id="myDropdown" class="dropdown-menu"> <li><a id="role" class="dropdown-item" href="#">First Div</a></li> <li><a id="relation" class="dropdown-item" href="#">Second Div</a></li> </div> </div> </div> <br/> <div id="rolecontainer" class="container"> <div class="table"> <div align="right"> <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add <li class="fa fa-plus"></li></button> </div> <h4><b>First Div</b></h4><br/> <div id="role_table"> <table id="szerep_data" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <td align="center" width="65%"><b>Data</b></td> <td align="center" width="35%"><b>View</b></td> </tr> </thead> <tbody> <tr> <td>Data1</td> <td><button class="btn btn-info">View</button></td> </tr> <tr> <td>Data2</td> <td><button class="btn btn-info">View</button></td> </tr> </tbody> </table> </div> </div> </div> <!-- Second dropdown element --> <div id="hucontainer" class="container"> <div class="col-sm-7"> <div align="right"> <button type="button" name="add" id="addHu_button" class="btn btn-warning">Add <i class="fa fa-plus"></i></button> </div> <h4><b>Second Div</b></h4> <br/> <div id="hu_table"> <table id="order_data" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <td align="center"><b>Data</b></td> <td align="center"><b>View</b></td> </tr> </thead> <tbody> <tr> <td>Data1</td> <td><button class="btn btn-info">View</button></td> </tr> <tr> <td>Data2</td> <td><button class="btn btn-info">View</button></td> </tr> </tbody> </table> </div> </div> </div> 

Answer 1

You can add some style to change the position of the button:

#add{
  display: inline-block;
  position: absolute;
  top: 33px;
  left: 85px;
}

 window.onload = function() { document.getElementById('hucontainer').style.display = 'none'; }; $('#divNewNotificationsRole-admin li').on('click', function() { $('#role-admin').html($(this).find('a').html()); }); // View dropdown // If the first dropdown element is selected, hide the second element and the dropdown list $('#role').click(function(e){ e.preventDefault(); // Select dropdown element without reloading the page var hu=document.getElementById("hucontainer"); var dropdowns = document.getElementsByClassName("dropdown-menu"); hu.style.display='none'; $("#rolecontainer").show("slow", function(){ }); dropdowns.style.display='none'; }); $('#relation').click(function(e){ e.preventDefault(); var role=document.getElementById("rolecontainer"); var dropdowns = document.getElementsByClassName("dropdown-menu"); $("#hucontainer").show("slow", function(){ }); role.style.display='none'; dropdowns.style.display='none'; }); 

 #add{ display: inline-block; position: absolute; top: 33px; left: 85px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div align="right" class="dropdown"> <button class="btn btn-primary dropdown-toggle btn-md" type="button" data-toggle="dropdown"><i class="fa fa-user"></i> Admin <span class="caret"></span> </button> <div class="dropdown-menu"> <li><a class="dropdown-item" href="#logout" data-toggle="modal">Logout <i class="fa fa-sign-out"></i></a></li> <li><a class="dropdown-item" href="#changepass" data-toggle="modal">Change Pass <i class="fa fa-undo"></i></a></li> </div> </div> <div class="btn-group" id="divNewNotificationsRole-admin"> <button id="role-admin" type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> View</button> <div id="myDropdown" class="dropdown-menu"> <li><a id="role" class="dropdown-item" href="#">First Div</a></li> <li><a id="relation" class="dropdown-item" href="#">Second Div</a></li> </div> </div> </div> <br/> <div id="rolecontainer" class="container"> <div class="table"> <div align="right"> <button type="button" name="add" id="add" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add <li class="fa fa-plus"></li></button> </div> <h4><b>First Div</b></h4><br/> <div id="role_table"> <table id="szerep_data" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <td align="center" width="65%"><b>Data</b></td> <td align="center" width="35%"><b>View</b></td> </tr> </thead> <tbody> <tr> <td>Data1</td> <td><button class="btn btn-info">View</button></td> </tr> <tr> <td>Data2</td> <td><button class="btn btn-info">View</button></td> </tr> </tbody> </table> </div> </div> </div> <!-- Second dropdown element --> <div id="hucontainer" class="container"> <div class="col-sm-7"> <div align="right"> <button type="button" name="add" id="addHu_button" class="btn btn-warning">Add <i class="fa fa-plus"></i></button> </div> <h4><b>Second Div</b></h4> <br/> <div id="hu_table"> <table id="order_data" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <td align="center"><b>Data</b></td> <td align="center"><b>View</b></td> </tr> </thead> <tbody> <tr> <td>Data1</td> <td><button class="btn btn-info">View</button></td> </tr> <tr> <td>Data2</td> <td><button class="btn btn-info">View</button></td> </tr> </tbody> </table> </div> </div> </div>