Javascript website security

Total newbie here. I'm working on a website which takes some user inputs, takes the inputs and pass it on to the next page, this process goes on for about 5 pages.

My question is, since I'm passing variables, I've declared a global variable but it's directly accessible in the console under inspect elopements. (For example, I have a variable named "activities", I realized I can just type "activities" in the console on the browser's inspect element and the content will show up, I can edit it to however I want too).

This is obviously super not secure, just wondering what's a better approach to handle these. And also, any other general security tips would be great. I will eventually pass the data into a database.

Below is my code in helper.js:

var activities = []

function removeA(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}

function select_activities(b){
  if (b.classList.contains('active')) {
    $(b).removeClass('active');
    removeA(activities, b.innerHTML);
  }
  else {
    $(b).addClass('active');
    activities.push(b.innerHTML);
  }
}

Here's my html:

<script src="scripts/helpers.js"></script>

  <div class="form-group">
    <p>What are the activities you're looking for:</p>

    <button class="btn btn-info" type="button" onclick="select_activities(this)">Sports</button>
    <button class="btn btn-info" type="button" onclick="select_activities(this)">Music</button>
</div>