correcting

by otorineko6790

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/otorineko6790/homeworkSystem/jquery.toolbar.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/otorineko6790/homeworkSystem/jquery.toolbar.css" rel="stylesheet" />

<table id="tools">
			  <tr>
				<td>
				  <div id="save" class="btn-toolbar"><i class="fa fa-save"></i></div>
				</td>
				<td>
				  <div id="font" class="btn-toolbar btn-toolbar-primary"><i class="fa fa-font"></i></div>
				</td>
				<td>
				  <div id="undo" class="btn-toolbar"><i class="fa fa-undo"></i></div>
				</td>
				<td>
				  <div id="color" class="btn-toolbar btn-toolbar-primary"><i class="fas fa-fill-drip"></i></div>
				  <div id="color-op" class="hidden">
				  <a href="#"><div id='red' style="width: 20px; height: 20px; background-color: red;"></div></a>
				  <a href="#"><div id='blue' style="width: 20px; height: 20px; background-color: blue;"></div> </a>
				  <a href="#"><div id='black' style="width: 20px; height: 20px; background-color: black;"></div></a>
				  <a href="#"><div id='white' style="width: 20px; height: 20px; background-color: white;"></div></a>
				  <a href="#"><div id='yellow' style="width: 20px; height: 20px; background-color: yellow;"></div></a>
				  </div>
				</td>
				<td>
				  <div id="dowmload" class="btn-toolbar"><i class="fas fa-download"></i></div>
				</td>
				<td>
				  <div id="previous" class="btn-toolbar btn-toolbar-primary"><i class="fa fa-arrow-left"></i></div>
				</td>
				<td>
				  <div id="next" class="btn-toolbar"><i class="fa fa-arrow-right"></i></div>
				</td>
			  </tr>
			</table>

JavaScript

$('#color').toolbar({
  content: '#color-op',
  position: 'bottom',
  event: 'click',
  hideOnClick: true
});