HTML, CSS and JavaScript playground

<html>

<label>Task</label>
    <textarea id="descrip"></textarea>
    
    <button onclick="saveItUp();" id="save">Save it</button>
    <button onclick="deleteItUp();" id="delete">Delete</button>
  </div>
  <script>
    var taskCounter = Number(localStorage.getItem("count")) + 1;
    var name = taskCounter;
    var deleteTemp = 0;

for (var i = 1; i < taskCounter; i++) {
      var temp = i;
      document.writeln("<br/>" + '<input type="radio"  name="rad" value="' +temp+ '" /> <label>'+'Code: '+temp+' | Value: '+localStorage.getItem(temp) + '</lable>');
    }
    
    function saveItUp() {
      var desc = $('#descrip').val();
      alert(desc);
      // Store
      localStorage.setItem(name, desc);
      localStorage.setItem("count", taskCounter);
      // Retrieve
      console.log(localStorage.getItem(name));
      console.log(localStorage.getItem("count"));
      location.reload();
    }

//This is where I'm trying to do that, I know selected doesn't exist, but I put it just for a better comprehension
    $('input:radio').change(function(){
      if (this.checked) {
        deleteTemp = this.value;
        alert(this.value);
      }
    });
    
    function deleteItUp() {
      if (deleteTemp !== 0) {
        localStorage.removeItem(deleteTemp);
      } else {
        alert('radio is not checked!');
      }
    }
  </script>
</body>

</html>