<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<body>
fst name : <input type="text" id="fst" >
lst name: <input type="text" id="sec">
<input type="text" id="search">
<button onclick="fun()">add</button>
<p id="in"></p>
<script>
var first = [];
var last=[]
var all=[]
function fun(){
var one=document.getElementById('fst').value
var two=document.getElementById('sec').value
first.push(one)
last.push(two)
document.getElementById('in').innerHTML=first.concat(last)
var search=document.getElementById('search').value
var ak=document.getElementById('in').innerHTML
ak.split(",")
console.log(ak[0])
for(i=0;i<=ak.length;i++){
}
}
</script>
</body>
</html>
