Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Sandbox</title>
    <meta charset="UTF-8" />
    <style>
        body {
            background: rgb(41, 39, 39);
        }
        .queryGetUrl {
            display: flex;
            justify-content: right;
            margin-bottom: 50px;
        }
        button {
            height: 30px;
            background-color: orange;
            font-weight: bold;
            margin-left: 10px;
        }
        input {
            height: 25px;
            margin-left: 5px;
            font-weight: bold;
        }
    </style>
  </head>

  <body>
    <!-- <div id="app"></div>
    <input value="my text" name="zzz" />
    <button id="ddd">Send</button>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
      $(function () {
        $("#ddd").on("click", function () {
          console.log("ok");
          console.log($("input[name='zzz']").val());
        });
      });
    </script> -->

    <div class="queryGetUrl">
        <div class="field">
            <div class="control">
                <input class="input" value="league" id="dataSend" name="league" >
            </div>
        </div>

        <div class="field">
            <div class="control">
                <input class="input" value="year" id="dataSend" name="year">
            </div>
        </div>

        <div class="field">
            <div class="control">
                <input class="input" value="round" id="dataSend" name="round">
            </div>
        </div>
        <button id="send" class="button is-block is-info is-large is-fullwidth">Get Matches</button>
    </div>

    <div class="queryGetUrl">
        <div class="field">
            <div class="control">
                <input class="input" value="date" id="dataSend2" name="date" >
            </div>
        </div>

        <div class="field">
            <div class="control">
                <input class="input" value="league" id="dataSend2" name="league">
            </div>
        </div>

        <div class="field">
            <div class="control">
                <input class="input" value="home" id="dataSend2" name="home">
            </div>
        </div>
        <div class="field">
            <div class="control">
                <input class="input" value="away" id="dataSend2" name="away">
            </div>
        </div>
        <button id="send2" class="button">Send Query</button>
    </div>

    <!-- <button id="send" class="button is-block is-info is-large is-fullwidth">Get Matches</button> -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("#send").on("click", function () {
            var obj = Object.assign({}, ...$("input[id='dataSend']").map((_, o) => ({[$(o).attr('name')]: $(o).val()})).toArray())
            alert(JSON.stringify(obj, null, 4))
        })
        $("#send2").on("click", function () {
            var obj = Object.assign({}, ...$("input[id='dataSend2']").map((_, o) => ({[$(o).attr('name')]: $(o).val()})).toArray())
            alert(JSON.stringify(obj, null, 4))
        })
        $('#send').click();
    })
    </script>
  </body>
</html>