JavaScript - tablica jako liczby? - sprawdzenie kodu

Cześć Wam

Chciałbym poprosić o sprawdzenie tego co sobie napisałem w ramach zabawy. Co chciałem osiągnąć? Dać możliwość dodania X liczb do siebie. Na starcie, podaje liczbę i generuje na jej podstawie odpowiednią ilość inputów. Do których później będę wpisywał liczby a na końcu je do siebie dodam.

Kod który stworzyłem:

<!DOCTYPE html>
<html lang="pl">
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-Ua-Compatible" content="IE=edge">
    <meta name="robots" content="noindex">

    <title>Prosty Kalkulator</title>
    <meta name="description" content="Opis">

    <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700&amp;subset=latin-ext" rel="stylesheet">
    <link rel="stylesheet" href="normalize.css" / >
    <link rel="stylesheet" href="main.css" / >

    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="container">
        <h2>Podaj ile liczb</h2>
        <div id="liczby">
            <input type="text" id="ile_liczb" />
            <input type="submit" value="WYGENERUJ" onclick="wypisz()" />  
        </div>

        <div id="liczby_do_wpisania"></div>

    </div>

<script type="text/javascript" src="java.js"></script>
</body>

</html>

body
{
	background-color: #343f3e;
	color: #dfdfdf;
	text-shadow: 1px 1px 0px black;
}

#container
{
	width: 80%;
	height: 100vh;
	margin: 0px auto;
	border-left: 3px solid #E2C044;
	border-right: 3px solid #E2C044;
	text-align: center;
	padding-top: 20px;
	box-sizing: border-box;
}

#liczby
{
	margin-bottom: 20px;
}

#liczby_do_wpisania
{
	width: 200px;
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
}

.licz
{
	margin-bottom: 5px;
}

#sumowanie
{
	margin-top: 10px;
}

function wypisz()
{
    var do_wypisania = "";
    var ile_liczb = document.getElementById("ile_liczb").value;

    for (i=0; i<ile_liczb; i++)
    {

        do_wypisania = do_wypisania+'<input type="text" id="liczba'+i+'" class="licz" />';

        if (i==(ile_liczb-1))
        {
            do_wypisania = do_wypisania + '<input type="submit" value="SUMA" id="sumowanie" onclick="suma()"/>';
        }

        document.getElementById("liczby_do_wpisania").innerHTML = do_wypisania;
    }
}


var ile = document.getElementById("ile_liczb").value;

function suma()
{

    var suma=0;
    var tablica = [];

    for (i=0; i<ile; i++)
    {
        tablica.push(document.getElementById("liczba"+i).value)
    }
    
    const tablica2 = tablica.map(x=> x*1);

    for(i=0; i<tablica2.length; i++)
    {
        suma = suma + tablica2[i];
    }

    alert(suma);
}

Więc tak...

1: Prosiłbym o informacje co zrobiłem źle i dlaczego powinienem zrobić inaczej.

2: Gdy 4 linijke JS wytne z funkcji i wkleje przed funkcje wypisz() - skrypt nie do końca działa, raz generuje inputy, raz nie generuje, innym razem generuje poprzednio wpisaną liczbę (tak jakby przeglądarka miała to w pamięci?) Nie jestem pewien jak to wyjaśnic :)

3: Nie miałem problemu z wypisaniem odpowiedniej ilości inputów, głowiłem się jednak później jak je do siebie dodać. Stworzyłem pusta tablice.w funkcji suma() i pętlą dodałem do niej wartości z wczesniej wygenerowanych inputów - czy tak jest poprawnie?

4: To nie rozwiązało problemu bo tablica miała w sobie stringi a nie liczby. Znalazłem w internecie takie coś jak w linijce 34... i szczerze? działa, ale nie rozumiem jak :) Gdyby ktoś wyjaśnił było by super - albo może podpowiedział inny sposób na to?

mam też to tutaj:

https://github.com/poprostulis/proste_dodawanie

Nigdy z githuba nie korzystałem, wiec nie wiem tak na prawde do czego konkretnie służy, ale wrzuciłem tam ten kod żeby mieć do niego dostęp w różnych miejscach. ;)

Z góry dzięki za pomoc, i mam nadzieje że tworzeniem tego tematu nie popełniam jakiegoś faux-pas. :)

Dodam jeszcze ze jestem totalnym newbie jeżeli chodzi o programowanie :) Dopiero się uczę więc proszę nie być zbyt surowym :)

EDIT
Chwilkę jeszcze pogrzebałem i znalazłem coś takiego:

parseFloat, dzięki temu zamieniłem linijke 34 -- const tablica2 = tablica.map(x=> x*1); na:

    for (i=0; i<ile; i++)
    {
        tablica[i] = parseFloat(tablica[i]);
    }

I oczywiscie resztę zmiennych itd też zmieniłem.

Która opcja jest lepsza? (jedna i druga działa) :)