I have developed a budgeting application with separate tabs for expenses and income. Each time a new expense or income is input, the details are stored in an array of objects, and then dynamically displayed as an <li> component within a <ul>. However, I am facing challenges with implementing the edit and delete functionalities. Every <li> element includes both delete and edit buttons, all sharing the same id generated by Date.now(). This unique id is based on milliseconds, ensuring no duplicates unless entries are made within the same millisecond window.
'use strict'
// JavaScript code here
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap');
/* CSS code here */
<!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.0">
<link rel="stylesheet" href="style.css">
<title>Budgetrr</title>
</head>
<body>
<main class="budget-container">
<section class="balance-container">
<!-- HTML code here -->
</section>
<section class="budget-dashboard">
<!-- More HTML code here -->
</section>
</main>
<script src="JavaScript/budget.js"></script>
</body>
</html>Despite my attempts to use .splice(), I'm struggling to successfully implement it.