<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="jumbotron"> <div class="container"> <h1>Quantum Mechanics</h1> <h2>UC Irvine Physics 113A</h2> <button id="button-template" type="button" class="btn btn-default btn-circle" title="Lecture 19">19</button> </div> </div> <div class="container"> <ul class="list-unstyled"> <li>Statistical interpretation</li> <li class="1">Wave function</li> <li>Position & wavelength</li> <li class="2">Uncertainty principle</li> <li class="1">Conservation laws</li> <li>Internal degrees of freedom</li> <li>Identical particles</li> </ul> </div>

body{margin:40px;} .btn-circle { width: 30px; height: 30px; text-align: center; padding: 3px 0; font-size: 14px; line-height: 1.428571429; border-radius: 15px; }

$(document).ready(function() { var template = $('#button-template'); var n = template.text()-0; var title = template.prop('title'); for(var i = 1; i < n; i++) { template.before(template.clone().text(i).prop('title',title.replace(n,i)).click(function() { $('li').removeClass('text-active'); $('li.'+i.toString()).addClass('text-active'); })); } });