ボタンクリックで、データ送信したい。

３つの項目が全て押されたら次の処理→3つ押された状態で送信ボタン→サーバーへ。で考えています。
各項目(メニュー、性別、年齢)のボタンがクリックされてたらデータ送信したいのですが、inputで良いのでしょうか？低レベルな質問で申し訳ございませんが回答よろしくお願いします。

html
1<!doctype html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>cash cafe</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10
11   <header><h1>顧客管理アプリ</h1></header>
12
13  <section class="container">
14  <div class="menu">
15    <h1>メニュー</h1>
16    <button type="button" class="menubutton"><p></p></button>
17    <button type="button" class="menubutton"><p></p></button>
18    <button type="button" class="menubutton"><p></p></button>
19    <button type="button" class="menubutton"><p></p></button>
20    <button type="button" class="menubutton"><p></p></button>
21    <button type="button" class="menubutton"><p></p></button>
22    <button type="button" class="menubutton"><p></p></button>
23  </div>
24
25  <div class="sex">
26    <h1>男女</h1>
27    <button class="sexbutton"><p></p></button>
28    <button class="sexbutton"><p></p></button>
29    <button class="sexbutton"><p></p></button>
30  </div>
31
32  <div class="ages">
33    <h1>年代</h1>
34    <button class="agesbutton"><p></p></button>
35    <button class="agesbutton"><p></p></button>
36    <button class="agesbutton"><p></p></button>
37    <button class="agesbutton"><p></p></button>
38    <button class="agesbutton"><p></p></button>
39    <button class="agesbutton"><p></p></button>
40    
41  </div>
42</section>
43
44<div class="send">
45  <button>送信</button>
46</div>
47
48 <script src=app.js ></script>
49</body>
50
51</html>

JavaScript
1
2"use strict";
3// メニューボタン
4  const menu=[
5    '抹茶ラテ',
6    'ほうじ茶ラテ',
7    '水出しコーヒー',
8    'ブレンドコーヒー',
9    'プリン',
10    'ティラミス',
11    'マカロンショコラ',
12  ];
13
14  const $mbutton=document.getElementsByClassName('menubutton');
15  let mbuttonIndex=0;
16  let $mbuttonLength=$mbutton.length;
17  while(mbuttonIndex<$mbuttonLength){
18    $mbutton[mbuttonIndex].textContent=menu[mbuttonIndex];
19    mbuttonIndex++;
20  };
21
22
23  // 性別ボタン
24  const sex=[
25          '男性',
26          '女性',
27          'その他',
28];
29
30const $sbutton=document.getElementsByClassName("sexbutton");
31let sbuttonIndex=0;
32let sbuttonLength=$sbutton.length;
33while(sbuttonIndex<sbuttonLength){
34  $sbutton[sbuttonIndex].textContent=sex[sbuttonIndex]
35  sbuttonIndex++;
36};
37
38
39// 年齢ボタン
40const ages=[
41  '-20代',
42  '30代',
43  '40代',
44  '50代',
45  '60代',
46  '70代-',
47];
48
49const $abutton=document.getElementsByClassName("agesbutton");
50let abuttonIndex=0;
51let abuttonLength=$abutton.length;
52while(abuttonIndex<abuttonLength){
53  $abutton[abuttonIndex].textContent=ages[abuttonIndex]
54  abuttonIndex++;
55};