title: how to set and modify <tr> tag data-id Attributes based on how many tags we have
body: <p>I'm creating a 'expense tracker' for practice.</p>
  <p>That takes a name, a date, an amount, and shows it on the table. Everything is working ok.<br />
  I add an item it will have a data-id of 0, next tr data-id of 1, next 2, and next 3 so on.</p>
  <p>BUT</p>
  <p>for example if I have 3 <code>&lt;tr&gt;</code> and I press the delete button and delete a row, and after that add another row data-id, it will be like this <code>tr[data-id=1],tr[data-id=2],tr[data-id=2]]</code></p>
  <p>I don't know what to do.</p>
  <p>Please have a look at images.
  <a href="https://gcdnb.pbrd.co/images/eN82BX9azBBz.png?o=1" rel="nofollow noreferrer">tr attr before deleting td</a> --- <a href="https://gcdnb.pbrd.co/images/JzM6VOtGfYjT.png?o=1" rel="nofollow noreferrer">tr attr after adding new td</a></p>
  <p>PS: I'm using localStorage to store table td's and get td's from it and put it back in the table. I want to remove element that have been clicked from localStorage too. I need the tr id for that.</p>
  <pre class="lang-js prettyprint-override"><code>//
  ////// Add To The Table
  //
  
  const btn = document.getElementById(&quot;btn&quot;);
  btn.addEventListener(&quot;click&quot;, add);
  
  function add() {
    // Select Elements
    const name = document.getElementById(&quot;name&quot;).value,
      date = document.getElementById(&quot;date&quot;).value,
      amount = document.getElementById(&quot;amount&quot;).value,
      currency = document.getElementById(&quot;selector&quot;).value;
  
    // Check if inputs is not empty
    if (
      name.length &lt;= 0 ||
      date.length &lt;= 0 ||
      amount.length &lt;= 0 ||
      currency == &quot;empty&quot;
    )
      return;
  
    // Create Table
    const newTr = createTr(),
      tdName = createTd(),
      tdDate = createTd(),
      tdAmount = createTd(),
      tdBtn = createTd(),
      deleteBtn = createInput();
  
    // Set Data Attribute
    const Trs = document.querySelectorAll(&quot;tbody &gt; tr&quot;);
    newTr.setAttribute(&quot;data-id&quot;, Trs.length);
    tdName.setAttribute(&quot;class&quot;, &quot;data&quot;);
    tdDate.setAttribute(&quot;class&quot;, &quot;data&quot;);
    tdAmount.setAttribute(&quot;class&quot;, &quot;data&quot;);
  
    // Create Text Node
    const varName = txtNode(name),
      varDate = txtNode(date),
      varAmount = txtNode(`${amount}${currency}`);
  
    // Select Parent element for insert
    const table = document.querySelector(&quot;table&quot;);
    const tbody = document.querySelector(&quot;tbody&quot;);
  
    // Creating Delete Button
    deleteBtn.setAttribute(&quot;type&quot;, &quot;button&quot;);
    deleteBtn.setAttribute(&quot;value&quot;, &quot;X&quot;);
    deleteBtn.setAttribute(&quot;class&quot;, &quot;deleteBtn&quot;);
    deleteBtn.addEventListener(&quot;click&quot;, remover);
    // Add Elements together
    tdName.appendChild(varName);
    tdDate.appendChild(varDate);
    tdAmount.appendChild(varAmount);
    tdBtn.appendChild(deleteBtn);
    newTr.appendChild(tdName);
    newTr.appendChild(tdDate);
    newTr.appendChild(tdAmount);
    newTr.appendChild(tdBtn);
    tbody.appendChild(newTr);
    // Add to the DOM
    table.insertBefore(tbody, null);
  
    // Add to the Local Storage
    const storeTableTd = document.querySelectorAll(&quot;tbody &gt; tr&quot;);
  
    let tableItems = [];
    for (let i = 0; i &lt; storeTableTd.length; i++) {
      let datas = storeTableTd[i].childNodes;
      let combine = {
        id: i,
        name: datas[0].innerText,
        date: datas[1].innerText,
        amount: datas[2].innerText,
      };
      tableItems.push(combine);
    }
    localStorage.setItem(`table`, JSON.stringify(tableItems));
  }
  //
  ////// Delete All Rows
  //
  
  const clearBtn = document.getElementById(&quot;clear&quot;);
  clearBtn.addEventListener(&quot;click&quot;, clear);
  
  function clear() {
    const storeTableRow = document.querySelectorAll(&quot;tbody &gt; tr&quot;);
    if (storeTableRow.length &gt; 0) {
      for (let i = 0; i &lt; storeTableRow.length; i++) {
        storeTableRow[i].remove();
      }
    }
    localStorage.clear();
  }
  
  //
  //////// Restore The Table
  //
  
  function restore() {
    const storageTable = JSON.parse(localStorage.table);
    for (let i = 0; i &lt; storageTable.length; i++) {
      // Create Elements
      const newTr = createTr(),
        createName = createTd(),
        createDate = createTd(),
        createAmount = createTd(),
        createDeleteBtn = createTd(),
        deleteBtn = createInput(),
        textNodeName = txtNode(`${storageTable[i].name}`),
        textNodeDate = txtNode(`${storageTable[i].date}`),
        textNodeAmount = txtNode(`${storageTable[i].amount}`),
        // Select Parent for Insert
        selectBody = document.querySelector(&quot;tbody&quot;);
  
      // Set Attributes
  
      newTr.setAttribute(&quot;data-id&quot;, `${storageTable[i].id}`);
      deleteBtn.setAttribute(&quot;type&quot;, &quot;button&quot;);
      deleteBtn.setAttribute(&quot;value&quot;, &quot;X&quot;);
      deleteBtn.setAttribute(&quot;class&quot;, &quot;deleteBtn&quot;);
  
      //TODO Add Delete and Create a Function withit
      createName.appendChild(textNodeName);
      createDate.appendChild(textNodeDate);
      createAmount.appendChild(textNodeAmount);
      createDeleteBtn.appendChild(deleteBtn);
      newTr.appendChild(createName);
      newTr.appendChild(createDate);
      newTr.appendChild(createAmount);
      newTr.appendChild(createDeleteBtn);
      selectBody.insertBefore(newTr, null);
    }
  }
  
  // Call Restore function
  
  const storeTd = document.querySelectorAll(&quot;td&quot;);
  if (storeTd.length == 0) {
    if (localStorage.length &gt; 0) {
      restore();
    }
  }
  
  // Delete Button Event Listener
  let selectAllBtns = document
    .querySelectorAll(&quot;input.deleteBtn&quot;)
    .forEach((item) =&gt; item.addEventListener(&quot;click&quot;, remover));
  
  function remover(e) {
    // Remove From Local Storage
    const searchId = parseInt(e.path[2].attributes[0].value),
      storageTable = JSON.parse(localStorage.table),
      newLocalStorage = storageTable.filter((obj) =&gt; obj.id !== searchId);
    localStorage.setItem(&quot;table&quot;, JSON.stringify(newLocalStorage));
  
    // Remove Selected Element
    const tbody = document.querySelector(&quot;tbody&quot;),
      elementToRemove = e.path[2];
    tbody.removeChild(elementToRemove);
  }
  
  //
  ////// Show Time and Date
  //
  
  // Select the Div
  const getDateDiv = document.querySelector(&quot;div.date&quot;);
  const getHourDiv = document.querySelector(&quot;div.hour&quot;);
  
  function getDate() {
    // Hour
    let newDate = new Date(),
      hour = newDate.getHours(),
      amPm = hour &gt; 12 ? &quot;PM&quot; : &quot;AM&quot;,
      tweleHourFormat = hour % 12,
      minuets = newDate.getMinutes(),
      seconds = newDate.getSeconds();
  
    // Date
    const year = newDate.getFullYear(),
      months = newDate.getMonth() + 1,
      day = newDate.getDate();
  
    // Add Zero to Mineuts and Seconds
    if (minuets &lt; 10) {
      minuets = `0${minuets}`;
    }
    if (seconds &lt; 10) {
      seconds = `0${seconds}`;
    }
  
    // Add to the Dom
    const date = `${year}/${months}/${day}`;
    const time = `${tweleHourFormat}:${minuets}:${seconds} ${amPm}`;
    getDateDiv.innerHTML = `${date}`;
    getHourDiv.innerHTML = `${time}`;
    setTimeout(getDate, 800);
  }
  
  getDate();
  
  //
  /////// Create Element Function
  //
  
  function createTd() {
    return document.createElement(&quot;td&quot;);
  }
  
  function createTr() {
    return document.createElement(&quot;tr&quot;);
  }
  
  function createInput() {
    return document.createElement(&quot;input&quot;);
  }
  
  function txtNode(node) {
    return document.createTextNode(node);
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;section class=&quot;dateSection&quot;&gt;
        &lt;div class=&quot;date&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;hour&quot;&gt;&lt;/div&gt;
      &lt;/section&gt;
    &lt;/header&gt;
    &lt;main class=&quot;inputs&quot;&gt;
      &lt;section class=&quot;texts&quot;&gt;
        &lt;h1&gt;Expense Tracker&lt;/h1&gt;
        &lt;h2&gt;Add a New Item: &lt;/h2&gt;
      &lt;/section&gt;
      &lt;section class=&quot;form&quot;&gt;
        &lt;div class=&quot;nameSection&quot;&gt;
          &lt;label id='nameLabel'&gt;Name:&lt;/label&gt;
          &lt;input type=&quot;text&quot; id=&quot;name&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;date__amountSection&quot;&gt;
          &lt;label id=&quot;dateLabel&quot;&gt;Date:&lt;/label&gt;
          &lt;input type=&quot;date&quot; id=&quot;date&quot;&gt;
          &lt;label id=&quot;amountLabel&quot;&gt;Amount:&lt;/label&gt;
          &lt;input type=&quot;text&quot; id=&quot;amount&quot;&gt;
          &lt;select id=&quot;selector&quot; value=&quot;Rial&quot;&gt;
            &lt;option id=&quot;choose&quot; value=&quot;empty&quot;&gt;Choose&lt;/option&gt;
            &lt;option id=&quot;dollar&quot; value=&quot;$&quot;&gt;Dollar&lt;/option&gt;
            &lt;option id=&quot;rial&quot; value=&quot;﷼&quot;&gt;Rial&lt;/option&gt;
            &lt;option id=&quot;euro&quot; value=&quot;€&quot;&gt;Euro&lt;/option&gt;
            &lt;option id=&quot;pound&quot; value=&quot;£&quot;&gt;Pound&lt;/option&gt;
          &lt;/select&gt;
          &lt;div&gt;
      &lt;/section&gt;
      &lt;div class=&quot;btns&quot;&gt;
        &lt;input type=&quot;button&quot; class=&quot;btns&quot; id=&quot;btn&quot; value=&quot;Add Expense&quot;&gt;
        &lt;input type=&quot;button&quot; class=&quot;btns&quot; id=&quot;clear&quot; value=&quot;Clear the List&quot;&gt;
      &lt;/div&gt;
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th id=&quot;headName&quot;&gt;Name&lt;/th&gt;
            &lt;th id=&quot;headDate&quot;&gt;Date&lt;/th&gt;
            &lt;th id=&quot;headAmount&quot;&gt;Amount&lt;/th&gt;
            &lt;th&gt; &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tbody&gt;&lt;/tbody&gt;
        &lt;/thead&gt;
      &lt;/table&gt;
      &lt;div id=&quot;demo&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>