How to create a form to change part of a href url of a button?

function showRSVP() {
    // caching the changed element (whose change event called the function):
    var checked = this,

        // getting the value of that changed element, and changing it to a
        // number (in base-10):
        n = parseInt(checked.value, 10),

        // getting all the 'div' elements whose id starts with 'rsvp':
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),

        // initialising a variable for use later:
        tmp;

    // iterating over the collection of elements we found earlier:
    for (var i = 0, len = rsvpElems.length; i < len; ++i){

        // storing the current element over which we're iterating:
        tmp = rsvpElems[i];

        // if i < n we're showing the rsvp element, otherwise we're hiding it:
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

// getting all the inputs with type="radio" and name="number":
var radios = document.querySelectorAll('input[name="number"][type="radio"]');

// iterating over that collection:
for (var i = 0, len = radios.length; i < len; i++){
    // binding an change event-handler to those radio elements
    radios[i].addEventListener('change', showRSVP);
}

function showRSVP(e) {
    // caching the changed-element (e is the event automagically passed
    // to the function), e.target is the element upon which the event
    // originated:
    var checked = e.target,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
        tmp;

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

// getting a reference to the relevant 'label' element:
var label = document.querySelector('label[for="number"]');

// adding a change event-listener:
label.addEventListener('change', showRSVP);

$(".link").attr("href", links.join(","));

$(".link").attr("href", "static_part?variable=" + links.join(","));

jQuery(".mb-control").on("click", function() {
  var box = $($(this).data("box"));
  if (box.length > 0) {
    box.toggleClass("open");
    box.find('.btn-close').attr('href', this.href);

    var sound = box.data("sound");

    if (sound === 'alert')
      playAudio('alert');

    if (sound === 'fail')
      playAudio('fail');
  }
  return false;
});

<a href="NEED TO PUT THE UNIQUE LOGOUT LINK HERE" class="btn btn-success btn-lg btn-close">Yes</a>

<a id="link" href=''><button type="button" class="btn btn-info">View</button></a>

$(document).ready(function() {

    $("#childNames").on('change', function () {

                var ref = document.getElementById("childNames").value;
                alert(ref);
                $('#link').attr('href', ref);

    });

});

function changeURL(){
var source = "https://www.google.com/"
var input  = document.getElementById("getData").value
document.getElementById("link").href = source + input
console.log(document.getElementById("link").href)
document.getElementById("getData").value = ""
}

<input id="getData" placeholder="email"/>
<br/>
<a id="link" href="https://www.google.com"> link </a>
<br/>
<button onclick="changeURL()">Click me </button>