JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
    <div class="livsmedelsmall">
        <h1>Search</h1>

        <form class="form">
            <div class="form-group">
                <input type="search" class="form-control" id="livsmedelsSokOrd" placeholder="some food here">
            </div>
            <button type="button" class="btn btn-default" id="sok-button">search</button>
        </form>
        <table id="tabell" class="table">
            <thead>
            <tr>
                <th>Food</th>
                <th>(kcal/100g)</th>
                <th>Carbs</th>
                <th>Protein</th>
                <th>Fat</th>
            </tr>
            </thead>
        </table>

CSS

body {
    padding-top: 50px;
}
.livsmedelsmall {
    padding: 40px 15px;
    text-align: left;
}

#tabell {
    margin-top: 40px;
}

JavaScript

var button = document.getElementById("sok-button");
var search = document.getElementById("livsmedelsSokOrd").value;

var script = document.createElement('script');
var scriptSrc = script.src = 'https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getLivsmedel';

document.querySelector('body').appendChild(script);
var tableBody = document.querySelector("tbody");


function getLivsmedel(data) {
    //Creating a table row for each array item find by the search 
    for (var i = 0; i < data.livsmedel.length; i++) {        
        tableBody.appendChild(document.createElement("tr")); 
        
        //Creating the five data cells for each row
        for(var j = 0; j < 5; j++) {
            tableBody.children[i].appendChild((document.createElement("td"))); 
        }
    }
    
    //Adding the searched items information in each cell
    for (var h = 0; h < data.livsmedel.length; h++) { 
        tableBody.children[h].children[0].innerHTML = data.livsmedel[h].namn;
        tableBody.children[h].children[1].innerHTML = data.livsmedel[h].energi;
        tableBody.children[h].children[2].innerHTML = data.livsmedel[h].kolhydrater;
        tableBody.children[h].children[3].innerHTML = data.livsmedel[h].protein;
        tableBody.children[h].children[4].innerHTML = data.livsmedel[h].fett;
    }
}