JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Business Card Generator</h1>
        Name: <input type="text" name="nameTag" id="name"><br>
        Phone Number: <input type="text" name="phonenr" id="phoneNumber"><br><br>
        <button onclick="changeSVGdata()">Make Business Card</button>
        <br>
        <br>
        <br>
        <div id="svg">         
             <svg id="Business_Card" data-name="Business Card" xmlns="http://www.w3.org/2000/svg" width="85.71mm" height="55.71mm" viewBox="0 0 242.94 157.91">
            <defs>
            <style>
            .cls-1 {
            font-size: 14px;
            }

            .cls-1, .cls-2 {
            fill: #232323;
            font-family: ArialMT, Arial;
            }

            .cls-2 {
            font-size: 21px;
            }

            .cls-3 {
            fill: none;
            stroke: #232323;
            stroke-miterlimit: 10;
            stroke-width: 1px;
            }
            </style>
            </defs>
            <title>business card</title>
            <text class="cls-1" transform="translate(39 78.75)">0612345678</text>
            <text class="cls-2" transform="translate(38 52.75)">Donald Duck</text>
            <rect class="cls-3" x="1" y="1" width="240.94" height="155.91"/>
            </svg>  
        </div>
        <br>
        <br>
        <a href="#saveFunction" onclick="saveNewCard(this)" id="saveButton">
            <button>Save Business Card</button>
        </a>

JavaScript

function changeSVGdata() {
                var nameValue = document.getElementById("name").value;
                var phoneNumberValue = document.getElementById("phoneNumber").value;
                var nameElement = document.getElementsByClassName("cls-2");
                var phoneNumberElement = document.getElementsByClassName("cls-1")
                nameElement[0].textContent = nameValue;
                phoneNumberElement[0].textContent = phoneNumberValue;
            }  
            
            
            function saveNewCard() {
                var fileName = "vidaXl Business Card - " + document.getElementById("name").value + ".svg"; 
                var svg = document.getElementById("svg");
                var serializer = new XMLSerializer();
                var svg_blob = new Blob([serializer.serializeToString(svg)],{'type': "image/svg+xml"});
                var url = URL.createObjectURL(svg_blob);
               
                alert(url);
                alert(fileName);
                var buttonHref = document.getElementById("saveButton");
                buttonHref.href = url;
                
                alert(saveFunction.href);
                
                buttonHref.download = fileName;
                
            }