var jobTitle = document.getElementById('jobTitle');
  var jobDescription= document.getElementById('jobDescription');

   firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

       var ref = database.ref('/Jobs/');
    ref.on('value', gotData,  errData);

  }
  })

   function gotData(data) {

var jobs = data.val();
var keys = Object.keys(jobs);

var container = document.getElementById('pos_1');

for (var i = 0; i<keys.length; i++) {
var k = keys[i];
var newCard = `

<li class="pos-card" id="pos_1">
      <div class="content">
        <div class="title new">UI/UX Designer</div>
        <div class="dept">Design</div>
        <div class="date">June 4</div>
        <div class="refer">Refer</div>
      </div>
      <ul class="desc">
        <li>6+ years’ experience designing desktop and mobile apps.</li>
        <li>Deep appreciation for simple solutions to complex problems.</li>
        <li>An amazing portfolio demonstrating successful delivery of innovative design solutions.</li>
      </ul>
</li>
      <div class="return">Return to listings   </div>
<div class="container refer-card">
<div class="modal confirmed"><span class="close-modal"></span>
 <h2>Thank you!</h2>
 <p><span id="refer_name" class="focus"></span> has been submitted for the <span id="refer_pos" class="focus"></span> position.</p>
</div>
<div class="sign-up card">
 <div class="card__header">
  <h1>Employee Referral</h1>
  <div class="description">For more information, please consult the   <a href="#">employee handbook</a>.</div>
 </div>
 <div class="card__content">
  <form class="referral" method="post">
    <div class="field line">
      <input class="req" maxlength="240" type="text" name="name" value="" required="required" id="name"/>
      <label class="placeholder" for="name">Full Name</label>
    </div>
    <div class="field line">
      <input class="req" maxlength="240" type="email" name="email" value="" required="required" id="email"/>
      <label class="placeholder" for="email">Email</label>
    </div>
    <div class="field line inline">
      <input class="req" maxlength="240" type="text" name="position" value="" required="required" id="position"/>
      <label class="placeholder" for="position">Position</label>
    </div>
    <div class="field inline right"><span class="dropdown-wrapper">
        <select class="empty" name="department" id="choice">
          <option value="" selected="selected">Department</option>
          <option value="1">Development</option>
          <option value="2">Sales</option>
          <option value="3">QA</option>
          <option value="4">Design</option>
          <option value="5">HR</option>
          <option value="6">Research  </option>
        </select></span></div>
    <div>
      <input type="submit" value="Submit" disabled="disabled"  id="btn"/>
    </div><a class="reset" href="#">Reset </a>
    </form>
   </div>
  </div>
  </div>

`;
container.innerHTML += newCard;

}
}