Form Input Select +update text based on Select

Hello, I'm learning Laravel and I'm looking for suggestions on how to approach my new idea.

Right now I have a blade template + jquery.

{{ Form::label('name', 'Name:', ['class' => 'col-lg-2 control-label']) }}
{{ Form::text('name', '', ['class' => 'form-control']) }}
{{ Form::label('materials[]', 'Materials:', ['class' => 'col-lg-2 control-label']) }}
{{ Form::select('materials[]', $materials, null, ['class' => 'form-control']) }}
{{ Form::label('unit', 'Unit:', ['class' => 'col-lg-1 control-label']) }}
{{ Form::text('unit', '', ['class' => 'form-control']) }}
<button name="plus" type="button" class="btn btn-sm btn-success">
<span class="glyphicon glyphicon-plus"></span>
</button>
etc

I've created custom.js file for duplicating Select Input (one or many Materials for each Product)

    var $parent = $(this).parent();
    $parent.clone(true).insertAfter($parent);
});

Data from the controller: $materials = Material::orderBy('name', 'asc')->pluck('name', 'id'); {"1":"Potatoe","2":"Flour","3":"Cheese","4":"Milk"}

I wish to dynamically update the Unit field with corresponding values (kg, m2, liters) from the controller: $materials = Material::orderBy('name', 'asc')->get();

{"id":2,"name":"Flour","unit":"kg","user_id":1,"created_at":"2018-01-15 12:46:28","updated_at":"2018-01-17 10:28:55"},
{"id":3,"name":"Cheese","unit":"kg","user_id":1,"created_at":"2018-01-17 08:39:49","updated_at":"2018-01-17 08:39:49"},
{"id":4,"name":"Milk","unit":"kg","user_id":1,"created_at":"2018-01-17 08:39:49","updated_at":"2018-01-17 08:39:49"}]

What is the best way to do it? And how can I do it, and keep the "Add More Button" functionality? Vue.js? I'd appreciate any links to guides or tutorials. I'm still learning.