привет, этот скрипт выполняет только первую форму, вторая не расчитуеться как заставить этот скрипт выполнить все формы
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script defer src="https://cdn.rawgit.com/chrisveness/geodesy/v1.1.2/latlon-spherical.js"></script>
<script defer src="https://cdn.rawgit.com/chrisveness/geodesy/v1.1.2/dms.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function () {
const lat1 = document.querySelector('#lat1').value;
const lon1 = document.querySelector('#lon1').value;
const lat2 = document.querySelector('#lat2').value;
const lon2 = document.querySelector('#lon2').value;
const p1 = new LatLon(Dms.parseDMS(lat1), Dms.parseDMS(lon1));
const p2 = new LatLon(Dms.parseDMS(lat2), Dms.parseDMS(lon2));
const dist = parseFloat(p1.distanceTo(p2).toPrecision(4));
document.querySelector('#result-distance').textContent = dist;
});</script>
</head>
<body>
<form>Lat 1: <input type="text" name="lat1" id="lat1" value="25.434345" >
Lon 1: <input type="text" name="lon1" id="lon1" value="55.902223445" >
Lat 2: <input type="text" name="lat2" id="lat2" value="25.8944324" >
Lon 2: <input type="text" name="lon2" id="lon2" value="55.893445">
<output id="result-distance"></output> metres
</form>
<form>Lat 1: <input type="text" name="lat1" id="lat1" value="25.434345" >
Lon 1: <input type="text" name="lon1" id="lon1" value="55.902223445" >
Lat 2: <input type="text" name="lat2" id="lat2" value="25.8944324" >
Lon 2: <input type="text" name="lon2" id="lon2" value="55.893445">
<output id="result-distance"></output> metres
</form>
</body>
</html>