Jquery Timer that starts and stops with same button

Question

I can't for the life of my figure out how to get this to work bug free.

The button in the code below needs to do three things.

1. Start a countdown when clicked (works)
2. End the countdown automatically, and reset itself when it reaches 0(works)
3. Reset itself prematurely if its clicked in the middle of a countdown(works, sort of)

Bug: when clicked repeatedly it starts multiple countdowns, and more or less breaks. It needs to either reset itself or start a countdown if clicked repeatedly. There should never be more than one countdown.

It works fines as long as people press the button, wait a second, and then press it again to stop it.
The bug I'm running into is if someone spam clicks it, it starts multiple countdowns and generally just breaks the button. I've tried a lot of different methods to fix it, and this is the closest I've gotten.

var i = 29;
let running=false;
$("#startButton").click(function () {     
    if(running==false){       
    var countdown = setInterval(function () {
        $("#startButton").text("Reset Timer"); 
        running=true;
        $("#stopWatch").html(i);
        i--;
        if (i <0)
    {
      $("#startButton").text("Start Timer");
      running=false;
      clearInterval(countdown);
      i = 29;
      $("#stopWatch").html(i); 
    }
     $("#startButton").click(function () {      
       $("#startButton").text("Start Timer");  
        running=false; 
      clearInterval(countdown);
      i = 29;
      $("#stopWatch").html(i+1);
    });
    }, 1000);
  }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stopWatch">30</div>
<button  id="startButton">Start Timer</button>