Using one input form and using localStorage on 2 buttons

Question

I've tried to use different class names/key names it still won't pull any data to localStorage for the liked2.on("click", saveData).. do I need to incorporate a for loop of some sort so it passes through both buttons?

** note the local storage does work on the liked1.on("click", saveData) **

        <form id="form1">
          <label>
            <h4>Destination One</h4>
            <input
              type="text"
              name="cityName"
              placeholder="Enter a destination"
              id="input"
            />
          </label>
          <button type="submit" class="primary button search-button">
            search
          </button>
          <div type="button" class="button button-like" id="liked1">
            <i class="fa fa-heart"></i>
          </div>
        </form>

  function saveData() {
    var cities = document.getElementById("input").value;
    localStorage.setItem("list", JSON.stringify(cities));
    var savedCity = JSON.parse(localStorage.getItem("list"));

    localStorage.setItem("list", JSON.stringify(savedCity));
    var result = JSON.parse(localStorage.getItem("list"));
    console.log(result);
  }

  liked1.on("click", saveData);
  liked2.on("click", saveData);

Answer 1

I can't clearly understand what do you want to do, so I will try my best to answer your question.

Every time you use setItem with the same keyName, it overrides the old one and fill it with the new one.

So you can

• Use different keyNames for each form, for example, form1_cityName for the first form and form2_cityName for the second form
• Change the format you save data in setItem, like JSON