JSON search with more inputs

Question

I have 4 inputs for search.

<div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Hledat podle názvu</p>
                    <input type="text" name="search" id="search" placeholder="" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>
                <div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Značka</p>
                    <input type="text" name="search" id="search" placeholder="Škoda" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>
                <div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Model</p>
                    <input type="text" name="search" id="search" placeholder="Octavia III Combi" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>
                <div class="col-sm-6 col-md-3 position-relative">
                    <p class="search-type">Modifikace</p>
                    <input type="text" name="search" id="search" placeholder="1.6 TDI  (90 HP, 2012 - 11)" class="form-control mr-sm-2" />
                    <ul class="list-group result"></ul>
                </div>

My JS for search is:

$(document).ready(function() {
        $.ajaxSetup({
            cache: false
        });
        $('.form-control').keyup(function() {
            $('.result').html('');
            $('#state').val('');
            var searchField = $('.form-control').val();
            var regex = new RegExp(searchField, "i");
            $.getJSON('data.json', function(data) {
                $.each(data, function(key, value) {
                    if (value.name.search(regex) != -1) {
                        $('.result').append('<li class="result-item"><div class="d-flex align-items-center"><div><img src="'+ value.thumbnail +'" height="60" width="60" class="thumbnail" /></div><div class="ml-2"><p class="search-name">'+ value.name + '</p><p class="search-price">' + value.price + ' Kč / <span class="storage in-stock">' + value.onStorage + '</p></div></div></li>');
                    }
                });
            });
        });

    });

Everything is working fine in first input but when I start to search in other input it does not show me anything.

EDIT: After advice I changed id to class. Now I have problem that on search I have opened all result containers.