document.getElementById() on a value that is set through a Meteor template

Question

So I've been trying to build a website using Meteor and am quite new with it. I am trying to have javascript that will make use of the values on the page and then create a download from those values. These values differ depending on which page the user is on as the meteor template is loaded with specific information. The way I would think is would work is:

var thing = document.getElementById("tcpout").value;

but when I test this I get "undefined". Now if I don't do .value then do something like

console.log(document.getElementById("tcpout"));

the output in the console is this:

<td id="tcpout"> 50443</td>

where 50443 is the value that I want. Yet I can't seem to figure out how to get that into the javascript. I am using meteor and have tried a few things through meteor's project .js file, but can't seem to figure out how to incorporate dynamic fields into javascript. Essentially I just want to figure out the easiest and best way to work with the mongodb data on the client-side with javascript. Here is the template and the meteor js file.

<template name="profile">
    {{#each iotdevice}}
    <div class="container" style="margin-top:10px">

        <div class="starter-template" align="center">

            <h1>{{model}} {{manufacturer}} {{type}}</h1>

            <p class="lead"></p>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>Ports</th>
                    <th>Outgoing</th>
                    <th>Incoming</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>TCP</td>
                    <td id="tcpout"> {{tcpout}}</td>
                    <td id="tcpin"> {{tcpin}}</td>
                </tr>
                <tr>
                    <td>UDP</td>
                    <td id="udpout"> {{udpout}}</td>
                    <td id="udpin"> {{udpin}}</td>
                </tr>
                </tbody>
            </table>

            <table class="table table-bordered">
                <thead>
                <tr>
                    <th colspan="2">Domains</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{domains}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <h4 align="center">Select Firewall</h4>
        <div align="center">
            <button style="margin-bottom:15px" type="button" class="btn btn-outline-danger" onclick="vyosformshow()">
                VyOS
            </button>
            <button style="margin-bottom:15px" type="button" class="btn btn-outline-danger"
                    onclick="download('test.sh','hello\nworld')">IPTables
            </button>
            <button style="margin-bottom:15px" type="button" class="btn btn-outline-danger">FreePBX</button>
            <button style="margin-bottom:15px" type="button" class="btn btn-outline-danger" onclick="dthings()">IPFire
            </button>
            <button style="margin-bottom:15px" type="button" class="btn btn-outline-danger">IPCop</button>
        </div>
        <div id="vyosform" style="display:none">
            <form>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="exampleInputEmail1">firewall in name</label>
                        <input class="form-control" id="firein" placeholder="">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">firewall out name</label>
                        <input class="form-control" type="text" id="fireout" placeholder="">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">rule number</label>
                        <input class="form-control" id="rulenum" placeholder="">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="exampleInputPassword1">device IP address</label>
                        <input class="form-control" id="ip" placeholder="">
                    </div>
                    <div align="center">
                        <button id="dostuff" class="btn btn-primary" style="margin-bottom:30px">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    {{/each}}
</template>

JS

if (Meteor.isClient) {
    //this code only runs on the client

    var directory = Iron.Location.get().path;
    var start = directory.lastIndexOf("/");
    var stop = directory.search(".html");
    var parseddir = directory.slice(start + 1, stop);
    var search = directory.slice(start + 1);
    var regexsearch = new RegExp(["^", search, "$"].join(""), "i");
    console.log(search);

    Template.iotprofiler.helpers({
        'device': function () {
            return DeviceList.find();
        }


    });

    Template.profile.helpers({
        'iotdevice': function () {
            return DeviceList.find({model: parseddir});
        }

    });


    Template.search.helpers({
        'results': function () {
            return DeviceList.find({$or: [{model: regexsearch}, {manufacturer: regexsearch}, {type: z}]});
        }

    });
}