title: Attendance Sheet of Student in "jquery" dynamic
body: <p>I am creating an attendance sheet in which a student add a pin code for attendance but there is the problem, when I try to add pin code of first and last person, etc then only these students are marked by 'present'(P) but others not shown "Absent".</p>
  
  <p>I am using HTML, CSS bootstrap and also for dynamic creating I am using jquery.</p>
  
  <p>Check this link I upload the code. I have no experience with jquery.</p>
  
  <p>I expect the output of the code is when we enter two or three-person pin code only those have 'P' but others have 'A' or Absent.</p>
  
  <p><a href="https://jsfiddle.net/MuneeburRehman/d12Lp8cn/2/" rel="nofollow noreferrer">FIDDLE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var pin;
  // var inde=60;
  var inde = 10;
  
  function timer1() {
    t = setInterval(next, 1000);
  }
  
  function next() {
    inde--;
    $('#timer').html("00:" + (inde &gt; 9 ? inde + "s" : "0" + inde + "s"));
    if (inde == 0) {
      clearInterval(t);
      $('#timer').html("00:" + "00");
      $("#att").slideUp(); // for 1st thing
      $("#tablee").slideDown(5000); //for table
    }
  }
  
  $(document).ready(function() {
    timer1();
    $("#check").click(function() {
      pin = $("#txt1").val();
      if (pin == "1111") {
        $('#p1').fadeOut();
        $('#hh1').fadeIn();
        $('#txt1').css("border", "2px solid green");
        $('#check').css("border", "2px solid green");
        $('#check').css("background-color", "green");
        console.log("1");
        $("#hh1").html("Usama you are Present!");
        var a1 = $('#s18').append('&lt;b&gt;P&lt;/b&gt;').css("color", "darkgreen");
        // $("#s28 ,#s38,#s48,#s58,#s68").html('&lt;b&gt;A&lt;/b&gt;').css("color","red");
  
      } else if (pin == "1212") {
        $('#p1').fadeOut();
        $('#hh1').fadeIn();
        $('#txt1').css("border", "2px solid green");
        $('#check').css("border", "2px solid green");
        $('#check').css("background-color", "green");
        console.log("2");
        $("#hh1").html("Muneeb you are Present!");
        var a2 = $('#s28').append('&lt;b&gt;P&lt;/b&gt;').css("color", "darkgreen");
        // $(' #s38, #s48, #s58, #s68').html('&lt;b&gt;A&lt;/b&gt;').css("color","red");
      } else if (pin == "1313") {
        $('#p1').fadeOut();
        $('#hh1').fadeIn();
        $('#txt1').css("border", "2px solid green");
        $('#check').css("border", "2px solid green");
        $('#check').css("background-color", "green");
        console.log("3");
        $("#hh1").html("Hamza you are Present!");
        var a3 = $('#s38').append('&lt;b&gt;P&lt;/b&gt;').css("color", "darkgreen");
        // $(' #s48, #s58, #s68').html('&lt;b&gt;A&lt;/b&gt;').css("color","red");
      } else if (pin == "1414") {
        $('#p1').fadeOut();
        $('#hh1').fadeIn();
        $('#txt1').css("border", "2px solid green");
        $('#check').css("border", "2px solid green");
        $('#check').css("background-color", "green");
        console.log("4");
        $("#hh1").html("Hassan you are Present!");
        var a4 = $('#s48').append('&lt;b&gt;P&lt;/b&gt;').css("color", "darkgreen");
        // $(' #s58, #s68').html('&lt;b&gt;A&lt;/b&gt;').css("color","red");
      } else if (pin == "1515") {
        $('#p1').fadeOut();
        $('#hh1').fadeIn();
        $('#txt1').css("border", "2px solid green");
        $('#check').css("border", "2px solid green");
        $('#check').css("background-color", "green");
        $("#hh1").html("Ahmed you are Present!");
        console.log("5");
        var a5 = $('#s58').append('&lt;b&gt;P&lt;/b&gt;').css("color", "darkgreen");
        // $(' #s68').html('&lt;b&gt;A&lt;/b&gt;').css("color","red");    
      } else if (pin == "1616") {
        $('#p1').fadeOut();
        $('#hh1').fadeIn();
        $('#txt1').css("border", "2px solid green");
        $('#check').css("border", "2px solid green");
        $('#check').css("background-color", "green");
        $("#hh1").html("Taimoor you are Present!");
        console.log("6");
        var a6 = $('#s68').append('&lt;b&gt;P&lt;/b&gt;').css("color", "darkgreen");
        // $('#s18,#s28, #s38, #s48, #s58').html('&lt;b&gt;A&lt;/b&gt;').css("color","red");
  
      } else {
        console.log("10");
        $('#hh1').fadeOut();
        $('#txt1').css("border", "2px solid red");
        $('#check').css("border", "2px solid red");
        $('#check').css("background-color", "red");
        $('#p1').fadeIn();
        $('#s18,#s28, #s38, #s48, #s58, #s68').append('&lt;b&gt;A&lt;/b&gt;').css("color", "red");
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#p1,
  #tablee {
    display: none;
  }
  
  table {
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h1 id="timer" style="padding-left:80%; "&gt;01m:00s&lt;/h1&gt;
  
  &lt;div class="container-fluid " id="tablee" style="padding-top:5%"&gt;
    &lt;h1 style="text-align: center; padding-bottom: 2%"&gt;Attendance Sheet&lt;/h1&gt;
    &lt;table class="table table-bordered table-responsive-md " style="text-align: center;"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th scope="col"&gt;#&lt;/th&gt;
          &lt;th scope="col"&gt;Name&lt;/th&gt;
          &lt;th scope="col" colspan="16"&gt;Attendance&lt;/th&gt;
          &lt;th scope="col"&gt;Total&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th scope="row"&gt;1&lt;/th&gt;
          &lt;td&gt;Usama&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;A&lt;/td&gt;
          &lt;td id="s18"&gt;&lt;/td&gt;
  
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;!-- For Total --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th scope="row"&gt;2&lt;/th&gt;
          &lt;td&gt;Muneeb&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;A&lt;/td&gt;
          &lt;td id="s28"&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;!-- For Total --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th scope="row"&gt;3&lt;/th&gt;
          &lt;td&gt;Hamza&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;A&lt;/td&gt;
          &lt;td id="s38"&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;!-- For Total --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th scope="row"&gt;4&lt;/th&gt;
          &lt;td&gt;Hassan&lt;/td&gt;
          &lt;td id=""&gt;A&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id="s48"&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;!-- For Total --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th scope="row"&gt;5&lt;/th&gt;
          &lt;td&gt;Ahmed&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id=""&gt;P&lt;/td&gt;
          &lt;td id="s58"&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;!-- For Total --&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th scope="row"&gt;6&lt;/th&gt;
          &lt;td&gt;Taimoor&lt;/td&gt;
          &lt;td id=""&gt;A&lt;/td&gt;
          &lt;td id=""&gt;A&lt;/td&gt;
          &lt;td id=""&gt;A&lt;/td&gt;
          &lt;td id="s68"&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;td id=""&gt;&lt;/td&gt;
          &lt;!-- For Total --&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;center&gt;
  
  
  
    &lt;div style="padding-top:4%" id="att"&gt;
  
      &lt;label&gt;Please Insert Your Pin for your Attendance: &lt;/label&gt;
      &lt;input type="text" id="txt1"&gt;
      &lt;button id="check"&gt;Check&lt;/button&gt;&lt;br&gt;&lt;br&gt;
      &lt;h4 id="hh1"&gt;&lt;/h4&gt;
      &lt;!-- &lt;a href="try2.html"&gt;&lt;button id="access"&gt;Check your Attendance&lt;/button&gt;&lt;/a&gt; --&gt;
      &lt;p id='p1' style="color: red"&gt;&lt;b&gt;You didn't Access Attendance Sheet Please insert Correct Pin..!&lt;/b&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>