Потому что нужно добавить еще одну радио кнопку с таким же именем

Правильно, должно выводиться 3, так как при компиляции кода for выполняется 3 раза, и 3 раза добавляется на кнопку событие клика. После выполнения всех итерация i будет равна последнему значению и при клике оно показывается, так как при клике for не срабатывает, т.к он не в функции клика и выполняется при компиляции.

Так-же замените это:

const button = document.getElementById('button');

На современный способ:

const button = document.querySelector('#button');

И вот это:

button.addEventListener('click', function (e){
     console.log(i);
});

На это:

button.addEventListener('click', (event) => {
     console.log(i);
});

(ОПАСНО, менять на стрелочную функцию только при понимании того как она работает, при не уверенности не использовать данный совет)

Да, этот код нагружает страницу как и любой другой код =)

Ну рисованием линий ты вряд ли сможешь нагрузить страницу чтобы было ощутимо хоть как-то. Да и более простого способа нет. На чистом js только так, возможно есть библиотеки которые облегчать написание кода.

Тык

Ну для начала вам нужно начать использовать php pdo, уже 2020 год на дворе.

А вот рабочий код:

$db = new PDO('mysql:host=...;dbname=...', $user, $pass);

if ( !isset($_POST['name']) || !isset($_POST['lastname']) || !isset($_POST['email']) || !isset($_POST['pass']) ) {
     echo 'Не все данные заполнены!!!';
     die;
}

$name = $_POST['name'];
$lastname = $_POST['lastname'];
$email = $_POST['email'];
$pass = $_POST['pass'];

$stmt = $dbh->prepare("INSERT INTO REGISTRY (name, lastname, email, password) VALUES (:name, :lastname, :email, :password)");
$stmt->bindParam(':name', $name);
$stmt->bindParam(':lastname', $lastname);
$stmt->bindParam(':email', $email);
$stmt->bindParam(':password', $password);
$falg = $stmt->execute();

if ($flag) {
     echo 'Успешно';
     die;
} else {
     echo 'Ошибка';
     die;
}

Как с этим работать?

Никак!)

Обычная растровая фотография может быть закодирована в base64 и вставлена inline в css, html, svg. В вашем примере обычная фотография закодирована в base64 и вставлена в svg. Считайте что это обычная фотография.

Скачайте эту же фотографию в jpeg и работайте с ней.