leaflet js map not updating marker and circle point when i search some another city dont know what is problem in code? See picture

when I search city in search bar than another city it show marker and circle on both location previous city and current city like so. if u see picture it will tell you what i am saying. help me to imporve the code.

See problem

<div class="container-fluid d-flex flex-column align-items-center area">
        <div class="search-area">
            <input type="text" placeholder="City" id="search">
            <button id="clickme" type="button">Search</button>
        </div>

    <div id="map"></div>
</div>



clickme.addEventListener("click",my=(e)=>{
          e.preventDefault();
          var city=search.value;
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=ac3673a8887645fc3d0493904a348e03`)
          .then(response=> response.json())
          .then(data=>{
              var lat=data.coord.lat;
              var long=data.coord.lon;
              var udata=data.name;
              var latlng = L.latLng(lat, long);    
              map.panTo([lat,long],13);
              var circle = L.circle([lat, long], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 1000
            }).addTo(map);
            var marker= L.marker(latlng).addTo(map)
              var popup = L.popup()
              .setLatLng(latlng)
              .setContent(udata)
              .openOn(map);
               console.log(data.name);
              
              });
          });

Answer

You would need to clear the previous layer from the map instance. You can try creating a layer group and add the layer to/remove it from that (DOCS):

// Create a layer group
const layerGroup = L.layerGroup().addTo(map)

clickme.addEventListener("click",my=(e)=>{
          e.preventDefault();
          var city=search.value;
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=ac3673a8887645fc3d0493904a348e03`)
          .then(response=> response.json())
          .then(data=>{
  
              // Clear the layer group
              layerGroup.clearLayers()
    
              var lat=data.coord.lat;
              var long=data.coord.lon;
              var udata=data.name;
              var latlng = L.latLng(lat, long);    
              map.panTo([lat,long],13);
              var circle = L.circle([lat, long], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 1000
            }).addTo(layerGroup); // Add to layerGroup instead of map

            // Add marker to layerGroup instead of map
            var marker= L.marker(latlng).addTo(layerGroup)
              var popup = L.popup()
              .setLatLng(latlng)
              .setContent(udata)
              .openOn(map);
               console.log(data.name);
              
              });
          });