ForEach подставляет одно значение в инпуты, почему?

Почему forEach внутри for in подставляет в инпуты только одно значение а не все по порядку?

const href = "http://redtrack.io/?utm_source=google&utm_medium=cpc&utm_campaign={network}&utm_content={creative}&utm_term={keyword}",
      url = new URL(href),
      input = document.querySelectorAll(".input");
let searchString;

if (url.search.includes("&")) {
  searchString = url.search.slice(1).split("&");
}

const searchStringToObj = (href) => {
  return searchString.reduce((accum, item) => {
    item = item.split("=");
    accum[item[0]] = item[1];
    return accum;
  }, {});
};

const res = searchStringToObj(searchString);

for (let key in res) {
  input.forEach((item, i) => {
    const g = res[key];
    input[i].value = g;
  });
}
body {
  font-family: sans-serif;
}

.form {
  display: flex;
  flex-direction: column;
  max-width: 250px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test</title>
  </head>

  <body>
    <div class="test">
      <h2>Test UTM</h2>
      <form class="form">
        <label for="utm_source">utm_source</label>
        <input class="input" id="utm_source" type="text" />
        <label for="utm_medium">utm_medium</label>
        <input class="input" id="utm_medium" type="text" />
        <label for="ad_group_name">ad_group_name</label>
        <input class="input" id="ad_group_name" type="text" />
        <label for="ad_group_name2">ad_group_name2</label>
        <input class="input" id="ad_group_name2" type="text" />
        <label for="ad_group_name3">ad_group_name3</label>
        <input class="input" id="ad_group_name3" type="text" />
      </form>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Вернуться на верх