Как сделать картинку кнопкой new lap (новый круг)??

Question

SaberChazer @SaberChazer

JavaScript

Как сделать картинку кнопкой new lap (новый круг)??

Как создать кнопку new lap (Новый круг)?
(в диве с айди resultDiv, есть две картинки 1 это скопировать время, а 2 как раз должна отвечать за кнопку new lap)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>New Project</title>
</head>
<body>
    <div class="main center">
        <div class="container center">
            <h1>Stopwatch</h1>
            <div class="watch">
                <h2 id="watch">00:00:00:00</h2>
            </div>
            <div class="buttons">
                <button id="start" class="buttonS" style="margin-right: 20px;">Start</button>
                <button id="pause" class="buttonS">Pause</button>
                <br><br>
                <button id="reset" class="button-35" style="">Reset</button>
            </div>
            <br>
            <div id="resultDiv" style="display: flex; align-items: center;">
                <svg xmlns="http://www.w3.org/2000/svg" class="text_copy_link" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24px" height="24px" style="cursor: pointer;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify iconify--akar-icons"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2Z"></path><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2"></path></g></svg>

                <span id="result" style="margin-left: 7px; margin-right: 7px;">0</span>

                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24px" height="24px" style="cursor: pointer;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" class="iconify iconify--ri"><path fill="currentColor" d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455zm-.692-2H20V5H4v13.385L5.763 17zm5.53-4.879l4.243-4.242l1.414 1.414l-5.657 5.657l-3.89-3.89l1.415-1.414l2.475 2.475z" class="lap" onclick="newLapTime()"></path></svg>

                    <div class="lapContainer">
                        <!-- 1 lap, 2 lap.. -->
                    </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const watch = document.querySelector('#watch');
let milliseconds = 0;
let timer;
const startWatch = () => {
    watch.classList.remove('paused');
    clearInterval(timer);
    timer = setInterval(()=>{
        milliseconds += 10;
        let dateTimer = new Date(milliseconds);
                result.innerHTML =
            ('0'+dateTimer.getUTCHours()).slice(-2) + ':' +
            ('0'+dateTimer.getUTCMinutes()).slice(-2) + ':' +
            ('0'+dateTimer.getUTCSeconds()).slice(-2) + ':' +
            ('0'+dateTimer.getUTCMilliseconds()).slice(-3,-1), 10

        watch.innerHTML =
            ('0'+dateTimer.getUTCHours()).slice(-2) + ':' +
            ('0'+dateTimer.getUTCMinutes()).slice(-2) + ':' +
            ('0'+dateTimer.getUTCSeconds()).slice(-2) + ':' +
            ('0'+dateTimer.getUTCMilliseconds()).slice(-3,-1);
    },10);
};

const pauseWatch = () => {
  watch.classList.add('paused');
  clearInterval(timer);
};

const resetWatch = () => {
    watch.classList.remove('paused');
    clearInterval(timer);
    milliseconds = 0;
    watch.innerHTML = '00:00:00:00';
    result.innerHTML = '00:00:00:00';
};

document.addEventListener('click', (e) =>{
    const element = e.target;
    if (element.id === 'start') startWatch();
    if (element.id === 'pause') pauseWatch();
    if (element.id === 'reset') resetWatch();
}); 

 function newLapTime() {
let lap = document.querySelector('#lap1');
result.innerHTML = result;
 }
</script>
</body>
</html>