JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Contact App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

    <div class="header">

        <div id="dropdown">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    Sort by Group
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">All</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Family</a></li>
                </ul>
            </div>
        </div>

        <div class="title">
            <h2>All Contacts</h2>
        </div>

        <div class="button" id="addButton">
            <p>
                <a href="#">
                    <span class="glyphicon glyphicon-plus-sign"></span>
                </a>
            </p>
        </div>

    </div>

    <div id="search">
        <form>
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit">
                        <i class="glyphicon glyphicon-search"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>

    <div id="contactList">

    </div>

    <div id="editcontact">

    </div>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

CSS

.header{
	display:flex;
}

.header>div{
	float: left;
}

.header .title{
	padding-left: 400px;
}

.header .dropdown{
	padding-top: 20px;
	padding-left: 20px;
}

.header .button{
	padding-left: 500px;
	padding-top: 5px;
}

.glyphicon-plus-sign{
	font-size: 50px;
}

.input-group{
	padding-top: 20px;
}

JavaScript

var array = [];
function Person(fullName, number, group) {
    this.fullName = fullName;
    this.number = number;
    this.group = group;
    array.push(this);
}

Person.prototype.getFullName = function () {
    return this.fullName + ' ' + this.number + ' ' + this.group;
}

var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");

//console.log(array);

document.getElementById("contactList").innerHTML = '';

function showContacts() {
    for (var i in array) {
        var id = array[i].number;
        document.getElementById("contactList").innerHTML +=
            '<ul><div><p>Name: ' + array[i].fullName + '</p><p>Number: ' + array[i].number + '</p><p>Group: ' + array[i].group + '</p>' +
            '<button type="button" class="btn btn-warning" onclick="editContact(' + id + ')">Edit</button>' +
            '<button type="button" class="btn btn-danger">Delete</button>' +
            '</div>';
    }
}

showContacts();

function editContact(id) {
    var obj = array.filter(function (ele) {
        console.dir(ele);
        if (ele.number === id) return ele;
        
    });
    
    document.getElementById("search").style.display = 'none';
    document.getElementById("contactList").style.display = 'none';
    document.getElementById("editcontact").style.display = '';
    document.getElementById("editcontact").innerHTML =
        '<div>'+
        '<input type="text"  placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
        '<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
        '<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
        '<button type="button" class="btn btn-success">Submit</button>'+
       '</div>';
}