検索ボックスでエンターキーを押した時に入力された値を元に検索をかけるという処理があります。  
下記htmlをヘッダー内に2つ 記載しているのですが、menu-search-wrap-hdクラスの検索ボックスで値が取得できないという状況に陥っています。  
javascriptは通っています。  
クラスぐらいしか2つの際はないように感じるのですが、何が原因で値が取れないのかが不明です。  
どなたかご教授いただけると幸いです。  
よろしくお願いします。

```

    <div class="menu-search-wrap">
        <label>
            <input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="アイテムを検索" class="search-keyword">
        </label>
        <a href="<{$search_form.search_url}>" class="menu-search-btn search-url"><i class="material-icons">search</i></a>
    </div>
    
    中略
    
    <div class="menu-search-wrap-hd">
    　　　　<label>
    　　　　　　　　<input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="アイテムを検索" class="search-keyword">
    　　　　</label>
    　　　　<a href="<{$search_form.search_url}>" class="menu-search-btn-hd search-url"> <img src="https://hogehoge.com" class="sample3Img"></a>
    </div>
    
```

```

    $(function(){
        $('.search-keyword').on('keypress', function(e) {
            if (e.keyCode == 13) {
                var index = $('.search-keyword').index(this);
                $('.search-url')[index].click();
            }
        });
    });
    
    
```
CC BY-SA 4.0
2021-11-09T01:47:07.183
83504
2021-11-09T02:18:00.567
2021-11-09T02:18:00.567
40597
40597
question
javascript html
inputのvalueが取得できない