javascript - Trying to grab the 'save' from a dropdown option from a clone in Bootstrap and save the input to Local Storage

Question

trying to save the input provided from the user in an input form that is cloned, so i want it to work for all the 'save' options, keep that text in local storage, and lastly to maintain that text in the input form even when the user refreshes the page, i've tried a bunch of different ways at my wits end, ha. here is fiddle: https://jsfiddle.net/dalejohn33/24u3vxmp/13/

$save.click((f) => {
  var task = $("input:selected").val();   
  var getTask = JSON.parse(localStorage.getItem("input"));
  var setTask = JSON.stringify(localStorage.setItem("input"));
  console.log("text input has been saved");
}

thanks for any help!

Answer 1

There are some tasks here:

1. Get the right input's value

var task = $(f.target).closest('.dropdown-menu').next().val();

$(f.target).closest('.dropdown-menu') gets you to the dropdown and the input is next() to it.

2. localStorage.setItem accepts 2 arguments: (1) The key name (2) The data (You pass only the key).

3. 1. In order to set the input's value to the value stored in localStorage, you need to store each input as a different key (not just input).
   2. You need to iterate the inputs and set its value from localStorage.
   3. Since the value you store is string, you don't need to stringify / parse.

Another point is the inconsistency name and id. The first element (the one you clone later) has none. Also the id and name are different values because you increase it between (length++)

https://jsfiddle.net/moshfeu/kw8jfg1m/32/