How to make chips using bootstrap 4 in input field

I have a task to do,which is to send mail to more then one person,so what i am trying to do is,when i enter a gmail id or any other mail id and press tab or enter it should convert into chip so that i can add another one, i don't have any idea how can i do that

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="form-group">
  <div class="offset-md-2 offset-lg-2 col-xs-12 col-sm-12 col-md-8 col-lg-8">
    <input type="email" class="form-control" id="to" placeholder="Type email">
  </div>
</div>

i am just trying o do it like it happens in gmail on key press of enter,tab,space it automatically changes into chips that's where i am struggling

from How to make chips using bootstrap 4 in input field