Untittied

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Queue Yourself</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
	<style>
		*{
			box-sizing: border-box;
		}
		.wrapper{
			text-align: center;
			display: flex;
			width: 100%;
		}
		.column{
			float: left;
			display: table-cell;
			flex: 1;
			width: 50%;
			padding: 10px;
			background-color: #f1f1f1;
			}
		.row:after {
			content: "";
			display: table-cell;
			width: 50%;
			text-align: bottom;
			}
			table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

	</style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="jumbotron">
	  <div class="wrapper">
		<div class="row">
			<div class="column" >
			<h1 class="display-3">Go ahead, Queue Yourself.</h1>
			<p class="lead">There's no better time than now!</p>
			<input id="inpAdr" type="address" placeholder="Your Address Here"></input>
			</div>
			<div class="column" >
			<table id="table1">
			<tr>
			<th>Queue Number</th>
			<th>Address</th>
			</tr>

			</table>
				<button type="submit" class="btn btn-primary btn-add" onclick="enqueue(inpAdr);setValues(getQueue(), getAddr());">Add Queue</button>
			</div>
			</div>
		</div>
      </div>
      <hr class="my-4">
      <div class="queue-list row"></div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript">
	var mainAccount = web3.eth.accounts[0];
	var queue;
      function enqueue(address) {

        var FifoClientInstance;
        for (var i = 0; i < App.contracts.FifoClients.length; i++) {
          if (App.contracts.FifoClients[i][0] == address) {
            App.contracts.FifoClients[i][1].deployed().then(function(instance) {
              FifoClientInstance = instance;
              return FifoClientInstance.push({ from: mainAccount });
            }).then(function() {
              queue =  FifoClientInstance.getQueue.call()
			  return queue;
            }).then(function(fifo) {
              console.log(fifo);
            //   const number = new web3.BigNumber(value);
            //   console.log(number.toString());
            //   $('.queue-length').text(number.toString());
            }).catch(function(err) {
              return console.log(err.message);
            });
            break;
          }
        }
      };

	  function getQueue(){
		return queue;
	  }
	  function getAddr(){
		return mainAccount;
	  }

	  function setValues(qnum, addr){
		var oddNum = 0;
		function addMember() {
        var table = document.getElementById("table1");
		if (oddNum%2 != 0)
		{
        table.innerHTML =  table.innerHTML + "<tr><th>{0}</th><th>{1}</th><tr>".format(qnum, addr);
		oddNum++;
		}
		else {
		table.innerHTML =  table.innerHTML + "<tr><th>{0}</th><th>{1}</th><tr>".format(qnum, addr);
		oddNum++;
		}
		}
    }
    </script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/web3.min.js"></script>
    <script src="js/truffle-contract.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>