in this javascript for leaflet my animate marker function  places a marker on the first clicked point and then after the timeout places a marker on the second clicked point. I want  to animate the marker along the polyline between the two points- var money = 100000;

const map = L.map("map").setView([54.2231637, -1.9381623], 6);
let clickedPoints = [];
let isLineDrawn = false;
let marker; // Declare the marker variable

// Function to create circle markers with click functionality
function createCircleMarkers(geojson) {
  return L.geoJSON(geojson, {
    pointToLayer: function(feature, latlng) {
      const circleMarker = L.circleMarker(latlng, {
        radius: 4,
        fillColor: '#ff7800',
        color: '#000',
        weight: 0.2,
        opacity: 1,
        fillOpacity: 0.8,
      });

      // Attach the feature to the circle marker
      circleMarker.feature = feature;

      circleMarker.on('mouseover', function() {
        this.bindPopup(feature.properties.city).openPopup();
      });

      circleMarker.on('click', function(e) {
        if (!isLineDrawn) {
          clickedPoints.push(e.target); // Push the circle marker with attached feature

          if (clickedPoints.length === 2) {
            const polyline = L.polyline(clickedPoints.map(p => p.getLatLng())).addTo(map);

            const firstCity = clickedPoints[0].feature.properties.city;
            const secondCity = clickedPoints[1].feature.properties.city;

            clickedPoints = [];
            isLineDrawn = true;
         
            // Remove click event listener after a line has been drawn
            map.off("click");
            // Set the map bounds to show the area with the polyline
            map.fitBounds(polyline.getBounds());
            money = money - 50000; // Subtract 50000 from money
            const moneyDisplay = document.getElementById("moneydisplay");
            const moneyString = `£${money}`; // Assuming money is a number
            moneyDisplay.textContent = moneyString;

            const instructionsElement = document.getElementById("instructions");

            // Clear any existing content in the instructions element:
            instructionsElement.innerHTML = "";

            // Create separate paragraph elements:
            const congratulationsParagraph = document.createElement("p");
            congratulationsParagraph.textContent = `Congratulations you have built your first train line from ${firstCity} to ${secondCity}!`;

            const costsParagraph = document.createElement("p");
            costsParagraph.textContent = `Your construction costs were £50,000. You have £50,000 remaining.`;

            const buyTrainParagraph = document.createElement("p");
            buyTrainParagraph.textContent = "You now need to buy a train.";
            const newTrainParagraph = document.createElement("p");
            newTrainParagraph.textContent =
              "At this time you can only afford to buy the train engine the Sleeping Lion. The Sleeping Lion has a top speed of 35 miles per hour. It can pull four carriages. Which means your train will have a capacity of around 120 seated passengers";
            const traincost = document.createElement("p");
            traincost.textContent = `The Sleeping Lion will cost you £20,000 to purchase. Do you wish to buy the Sleeping Lion?`;

            // Append paragraphs to the instructions element:
            instructionsElement.appendChild(congratulationsParagraph);
            instructionsElement.appendChild(costsParagraph);
            instructionsElement.appendChild(buyTrainParagraph);
            instructionsElement.appendChild(newTrainParagraph);
            instructionsElement.appendChild(traincost);

            // Add button element:
            const buyButton = document.createElement("button");
            buyButton.id = "buybutton";
            buyButton.textContent = "Buy Train";

            // Append the button element to the instructions element:
            instructionsElement.appendChild(buyButton);

            // Add click event listener to the Buy Train button
            document
              .getElementById("buybutton")
              .addEventListener("click", function () {
                money = money - 20000; // Subtract 20000 from money
                const moneyDisplay = document.getElementById("moneydisplay");
                const moneyString = `£${money}`;
                moneyDisplay.textContent = moneyString;
                // Update instructions content after successful purchase
                instructionsElement.innerHTML = ""; // Clear previous content

                const successMessage = document.createElement("p");
                successMessage.textContent =
              `You now have a train line from ${firstCity} to ${secondCity} and a train! Press the button below to begin operations.`  
              instructionsElement.appendChild(successMessage);
              
                // Add button element:
            const trainButton = document.createElement("button");
            trainButton.id = "trainbutton";
            trainButton.textContent = "Start Train Journeys";

            // Append the button element to the instructions element:
            instructionsElement.appendChild(trainButton);
              
         trainButton.addEventListener('click', function () {
  const latlngs = polyline.getLatLngs(); // Get the latlngs of the polyline
  
  let index = 0; // Initialize an index variable
  
  // Create a marker at the first point of the polyline
  marker = L.marker(latlngs[index]).addTo(map);
  
function animateMarker(index) {
  if (index >= latlngs.length) return; // Base case: stop at the end

  const currentLatLng = latlngs[index];
  marker.setLatLng(currentLatLng);

  // Call animateMarker again with incremented index after a delay
  setTimeout(() => animateMarker(index + 1), 1000);
}
  
  // Inside trainButton click event listener:
animateMarker(0); // Start animation from the first point
});



              
              
              });
          }
        }
      });

      return circleMarker;
    },
  });
}

fetch("gb.geojson")
  .then((response) => response.json())
  .then((geojson) => {
    L.geoJSON(geojson, {
      fillColor: "none", // Style for polygon (empty fill)
      weight: 1,
      color: "#000",
      opacity: 1,
      fillOpacity: 0,
    }).addTo(map);
  })
  .catch((error) => {
    console.error("Error loading GeoJSON:", error);
  });

fetch("cities.geojson")
  .then((response) => response.json())
  .then((geojson) => {
    createCircleMarkers(geojson).addTo(map);
  })
  .catch((error) => {
    console.error("Error loading GeoJSON:", error);
  });