JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
 <div class="alert alert-warning user-feedback">
    Alerts
  </div>
</div>
  <div class="row">
    <div class="col-xs-12">
      <ul class="nav nav-tabs" id="myTabs">
        <li role="presentation" class="active"><a href="#home">Login</a></li>
        <li role="presentation"><a href="#voting">Voting</a></li>
        <li role="presentation"><a href="#admin">Admin</a></li>
      </ul>

       <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">
          <div class="row">
            <div class="col-xs-12">
              <div class="voter-login">
                <p>Please enter your details below to vote. </p>
                <div class="form-group">
                  <input type="text" class="form-control" name="voterId" placeholder="Voter ID" >
                </div>
                <div class="form-group">
                  <input type="password" class="form-control" name="voterPass" placeholder="Passcode" >
                </div>
                <div class="form-group">
                  <button class="btn btn-success vfm-voter">Login!</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div role="tabpanel" class="tab-pane" id="voting">
          <div class="row">
            <div class="col-xs-12">
               <h3>Select issue to vote for:</h3>
               <div class="form-group">
                 <select name="community_issues" class="form-control"></select>
               </div>
               <div class="form-group">
                 <button name="cast_vote" class="btn...

CSS

body {
  margin-top:20px;
}
.user-feedback {
  float:left;
  position:absolute;
  display:none;
  left:30%;
  width:200px;
  top:50px;
  z-index:999;
  text-align:center;
}
body {
    background-color: lightblue;
        background-image: url("http://www.math.wsu.edu/mathlessons/animation/VOTE.GIF");
    background-repeat: no-repeat;
    background-position: below right;
}

JavaScript

// global variable setup
isLoggedIn = false;
isAdmin = false;
var voter;

// user db setup
var site_users = [
	{voterId: '0001', voterPass: '1111', voterName: 'Aidan Newman', hasVoted: false, postcode:2950, isAdmin:true},
  {voterId: '0002', voterPass: '2222', voterName: 'Jayden Canete', hasVoted: false, postcode:1234},
  {voterId: '0003', voterPass: '3333', voterName: 'Evan Cornwell', hasVoted: false, postcode:1235},
  {voterId: '0004', voterPass: '4444', voterName: 'Cameron Stoltenberg', hasVoted: false, postcode:1236},
  {voterId: '0005', voterPass: '5555', voterName: 'Jasper Guzman', hasVoted: false, postcode:1237},
];

var community_issues = [];

//Load community issues into the UI
function loadCommunityIssues() {
  if(community_issues.length == 0){
    $('select[name=community_issues]').append('<option class="list-group-item">No issues loaded. Please see an Admin</option>');
    $('button[name=cast_vote]').attr('disabled', true);
  }else{
  //Clear the element just to make sure we get the right number of elements in it.
    $('select[name=community_issues]').html('');
    //Reset the disabled button
    $('button[name=cast_vote]').attr('disabled', false);
    console.log(community_issues);
    for(i = 0; i < community_issues.length; i++) {
      $('select[name=community_issues]').append('<option value="'+community_issues[i].id+'" class="list-group-item">'+community_issues[i].title+'</option>');
    }
  }
}

//Display votes in the Admin UI
function displayVotes() {
	$('.final_votes').html('');
  for (i = 0; i < community_issues.length; i++){
  	$('.final_votes').append('<li class="list-group-item"><span class="label label-default label-pill pull-right"> '+community_issues[i].votes+'</span>'+community_issues[i].title+'</li>');
  }
  
}

//Admin create issues form
$('button[name=add_issue]').click(function() {
	var issue = $('input[name=new_community_issue]');
  if(issue.val() == ''){
 		messageUsers("Please enter an issue to store first.");
  }else{
 ...