title: How can I increment my <p> tag when I clicked add in my HTML table?
body: <p>This is my whole code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;title&gt;Pre-Enrollment&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
        &lt;link rel="stylesheet" href="css/customcss.css"&gt;
      &lt;/head&gt;
      &lt;nav&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;li role="presentatoion" class="active"&gt;&lt;a href="FromEnrollment.php"&gt;Pre-Enrollment&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="Students.php"&gt;Students&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="Subjects.php"&gt;Subjects&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;br&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;    &lt;!--RED--&gt;
                  &lt;div class="col-md-3" &gt;
                      &lt;form id="idNumber" action="FromEnrollment.php" method="POST"&gt;
                      &lt;div class="input-group"&gt;
                       &lt;!--   &lt;input type="text" class="form-control" placeholder="ID NUMBER"&gt; --&gt; 
                          &lt;span class="input-group-btn"&gt;
                              &lt;!--&lt;form action="newPhp.php" method="POST"&gt;--&gt;
                                  &lt;input type="text" placeholder="ID NUMBER" class="form-control" name="input"&gt;
                                  &lt;input type="submit" value="Enter" name"Enter" class="btn btn-default"&gt;
                              &lt;!--&lt;/form&gt;--&gt;
                              &lt;button class="btn btn-default" type="button" onclick="resetIdNumber()" value="reset"&gt;Reset&lt;/button&gt;     
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-4 col-md-offset-3"&gt;
                      &lt;select style="width: 120px;"&gt;
                          &lt;option value="All"&gt;Overall Term&lt;/option&gt;
                          &lt;option value="First"&gt;First Term&lt;/option&gt;
                          &lt;option value="Second"&gt;Second Term&lt;/option&gt;
                          &lt;option value="Short"&gt;Short Term&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;button class="btn btn-primary" type="button"&gt;Apply&lt;/button&gt;
                      &lt;button class="btn btn-default" type="button" onclick="myFunction()" value="reset"&gt;Reset&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="row" &gt;
  
                  &lt;?php
  
                   if($_SERVER['REQUEST_METHOD'] == 'POST'){
  
                      if( isset($_POST['input']) ){
                      include 'dbcon.php';
  
                          $Idnumber = ($_POST['input']);
                           $stmt = $pdo-&gt;query("SELECT * FROM students WHERE id_number = '$Idnumber'");
                           $currentTerm = $pdo-&gt;query("SELECT * FROM pre_enroll WHERE id_number = '$Idnumber'");
  
  
                          $result = $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);
                          $result2 = $currentTerm-&gt;fetchAll(PDO::FETCH_ASSOC);
                          // $last_name = print_r($result[0]['last_name']);
                          // $first_name = print_r($result[0]['first_name']);
                          // $course = print_r($result[0]['course']);
  
                           echo "
                              &lt;div class='col-md-2'&gt;
                                  &lt;p&gt;Name:  ";
                                  print_r($result[0]['last_name']);
                          echo " ";
                                  print_r($result[0]['first_name']);
                           echo"&lt;/p&gt;
                              &lt;/div&gt;";
  
  
                           echo "
                              &lt;div class='col-md-4'&gt;
                                  &lt;p&gt;Course and Year:  ";
                                  print_r($result[0]['course']);
                          echo"-";
                                  print_r($result[0]['year']);
                           echo"&lt;/p&gt;
                              &lt;/div&gt;";
  
  
                         echo "
                              &lt;div class='col-md-4'&gt;
                                  &lt;p&gt;Current term:  ";
                                  print_r($result2[0]['term']);
                           echo"&lt;/p&gt;
                              &lt;/div&gt;";
  
  
                              // &lt;div class='col-md-4'&gt;
                              //    &lt;p&gt;Current Term: &lt;/p&gt;
                              // &lt;/div&gt;;
  
                      }
  
                    }else{
  
                      echo "
                       &lt;div class='col-md-2'&gt;
                          &lt;p&gt;Name: &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class='col-md-4'&gt;
                         &lt;p&gt;Course and Year: &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class='col-md-4'&gt;
                         &lt;p&gt;Current Term: &lt;/p&gt;
                      &lt;/div&gt;";
                    }
                  ?&gt;
  
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;form id="Subjects" action="#"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" id="myInput" onkeyup="filterData()" class="form-control" placeholder="Search for..."&gt;
                          &lt;span class="input-group-btn"&gt;  
                              &lt;button class="btn btn-default" type="button" onclick="resetSubjects()" value="reset"&gt;Reset&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-2"&gt;
                      &lt;p&gt;Total Units: &lt;b&gt; &lt;/b&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
  
              &lt;?php
              include 'dbcon.php';
              $stmt = $pdo-&gt;query("SELECT subjects.coursenumber as 'Course No.', subjects.destitle as 'Descriptive Title', enr_stat.term as 'Term', subjects.units as 'Units' FROM subjects INNER JOIN enr_stat ON subjects.coursenumber = enr_stat.coursenumber");
              ?&gt;
  
              &lt;div class="row"&gt;
                      &lt;div class="col-md-6 col" id="table-wrapper"&gt;
                          &lt;div id="table-scroll"&gt;
                              &lt;table class="table" id="myTable"&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Course No.&lt;/th&gt;
                                      &lt;th&gt;Descriptive Title&lt;/th&gt;
                                      &lt;th&gt;Term&lt;/th&gt;
                                      &lt;th&gt;Unit&lt;/th&gt;
                                      &lt;th&gt;&lt;/th&gt;
                                  &lt;/tr&gt;
  
  
                                  &lt;?php
                                  $results = $stmt-&gt;fetchAll(PDO::FETCH_ASSOC);
                                  foreach ($results as $row) {
  //                                        echo "&lt;form action=''&gt;";
                                          echo "&lt;tr&gt;";
                                          echo "&lt;td&gt;".$row['Course No.']."&lt;/td&gt;"; 
                                          echo "&lt;td&gt;".$row['Descriptive Title']."&lt;/td&gt;"; 
                                          echo "&lt;td&gt;".$row['Term']."&lt;/td&gt;";
                                          echo "&lt;td&gt;".$row['Units']."&lt;/td&gt;";
                                          echo "&lt;input type='hidden' name='CourseNo' value='".$row['Course No.']."'/&gt;";
                                          echo "&lt;input type='hidden' name='descrp' value='".$row['Descriptive Title']."'/&gt;";
                                          echo "&lt;input type='hidden' name='term' value='".$row['Term']."'/&gt;";
                                          echo "&lt;input type='hidden' name='units' value='".$row['Units']."'/&gt;";
                                          echo "
                                          &lt;td&gt;
                                              &lt;button class='btn btn-default btn-sm' onclick='addDataToLocalStorage(this)'&gt;
                                                  &lt;span class='glyphicon glyphicon-plus' aria-hidden='true'&gt;&lt;/span&gt;
                                              &lt;/button&gt;    
                                          &lt;/td&gt;
                                          ";
  
                                          echo "&lt;/tr&gt;";
  //                                      echo "&lt;/form&gt;"; 
                                  }
                                  ?&gt;
                              &lt;/table&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6 col" id="table-wrapper"&gt;
                          &lt;div id="table-scroll"&gt;
                              &lt;table class="table" id="copy"&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Course No.&lt;/th&gt;
                                      &lt;th&gt;Descriptive Title&lt;/th&gt;
                                      &lt;th&gt;Term&lt;/th&gt;
                                      &lt;th&gt;Unit&lt;/th&gt;
                                      &lt;th&gt;&lt;/th&gt;
                                  &lt;/tr&gt;
                             &lt;/table&gt;  
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-offset-11"&gt;
              &lt;button class="btn btn-primary" type="button"&gt;Apply&lt;/button&gt;
              &lt;br&gt;
          &lt;/div&gt;
          &lt;script&gt;
              function resetIdNumber(){
                  document.getElementById("idNumber").reset();
              }
  
              function resetSubjects(){
                  document.getElementById("Subjects").reset();
              }
  
              function filterData() {
                  var input, filter, table, tr, td, i;
                  input = document.getElementById("myInput");
                  filter = input.value.toUpperCase();
                  table = document.getElementById("myTable");
                  tr = table.getElementsByTagName("tr");
  
                  for (i = 0; i &lt; tr.length; i++) {
                  td = tr[i].getElementsByTagName("td")[1];
                      if (td) {
                          if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
                              tr[i].style.display = "";
                          } else {
                              tr[i].style.display = "none";
                          }
                      }       
                  }
              }
  
              function addDataToLocalStorage(r){
                  var courseNo = r.parentNode.parentNode.childNodes[0].innerText;
                  var descriptive = r.parentNode.parentNode.childNodes[1].innerText;
                  var term = r.parentNode.parentNode.childNodes[2].innerText;
                  var unit = r.parentNode.parentNode.childNodes[3].innerText;
                  var t = "&lt;button onclick=clearData(this);deleteRow(this); class='btn btn-default btn-sm'&gt;&lt;span class='glyphicon glyphicon-remove' aria-hidden='true'&gt;&lt;/span&gt;&lt;/button&gt;";
                  // alert(courseNo + " " + descriptive + " " + unit);
  
                  var list = {
                      courseNumber: courseNo,
                      descriptiveTitle: descriptive,
                      term: term,
                      units: unit,
                  };
  
                  var jsonObject = JSON.stringify(list);
                  localStorage.setItem("list" + localStorage.length,jsonObject);
  
                  var thatTable = document.getElementById("copy");
                  var newRow = thatTable.insertRow(-1); //at the last position of the table
  
                  var newCell1 = newRow.insertCell(0);
                  newCell1.innerHTML = courseNo;
                  var newCell2 = newRow.insertCell(-1);
                  newCell2.innerHTML = descriptive;
                  var newCell3 = newRow.insertCell(-1);
                  newCell3.innerHTML = term;
                  var newCell4 = newRow.insertCell(-1);
                  newCell4.innerHTML = unit;
                  var newCell5 = newRow.insertCell(-1);
                  newCell5.innerHTML = t;
              }
  
              function clearData(r) {
                  var data = r.parentNode.parentNode.rowIndex;
                  var data_key = data - 1;
                  localStorage.removeItem(localStorage.key(data_key));
              }
  
               function deleteRow(r) {
                   var i = r.parentNode.parentNode.rowIndex;
                   document.getElementById("copy").deleteRow(i);
              }
  
              //  function refresh(){
              //     if (localStorage.getItem("list0") != null) {     ///if there is "student1" exist in localStorage
              //          for(i = 0; i &lt;= localStorage.length; i++){
              //             var stores = localStorage.getItem("list" + i);
              //             var jsonString = JSON.parse(stores); //convert text to javascript object
  
              //               var thatTable = document.getElementById("copy");
              //               var newRow = thatTable.insertRow(-1); //at the last position of the table
  
              //                 var newCell1 = newRow.insertCell(0);
              //                     newCell1.innerHTML = courseNo;
              //                 var newCell2 = newRow.insertCell(-1);
              //                     newCell2.innerHTML = descriptive;
              //                 var newCell3 = newRow.insertCell(-1);
              //                     newCell3.innerHTML = term;
              //                 var newCell4 = newRow.insertCell(-1);
              //                     newCell4.innerHTML = unit;
              //                 var newCell5 = newRow.insertCell(-1);
              //                     newCell5.innerHTML = t;
  
              //         }
              //     }
              //}
          &lt;/script&gt; 
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;/body&gt;   
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I increment my <code>&lt;p&gt;Total Units:&lt;b&gt; &lt;/b&gt;&lt;/p&gt;</code> whenever I clicked add button in my table. My table fetched some data in my database and when I clicked add, The data will copy in the next html table. I want every time I clicked the add button, my <code>&lt;p&gt;</code> tag will increment by how many units the subject is.</p>
  
  <p>I tried using the <code>stepUp()</code> method in js but I dont know how to get the value of the units row in my html table. Is there any way to do it with my current codes? </p>