How do I add a value to a list with button click?

I'm having trouble using the appendChild function...

here's my code

<!DOCTYPE html>
<html>
<body>

<form oninput="x.value=((parseFloat(winning_number.value)%(parseFloat(total_key_value.value)*100*2))/(parseFloat(total_key_value.value)*2)).toFixed(2)">
<input type="number" id="winning_number" value="" placeholder="Winning Number"> ~ 
<input type="number" id="total_key_value" value="" placeholder = "Total (Keys)">
= <output name="x" for="winning_number total_key_value"></output>%
</form>

<button type="submit" onclick="document.getElementById("container").appendChild(li);">Submit</button>


<ol id="list"></ol>

</body>
</html>

i enter 2 numbers and it will calculates the result using a formula.

how can i make a button that will add the x value to a list once clicked?

also, i want to be able to delete items from the list if that's possible

im very new to javascript as you might realize

thanks

Solution

try this code https://jsfiddle.net/bfmpkc7p/2/

<form oninput="x.value=((parseFloat(winning_number.value)%(parseFloat(total_key_value.value)*100*2))/(parseFloat(total_key_value.value)*2)).toFixed(2)">
<input type="number" id="winning_number" value="" placeholder="Winning Number"> ~ 
<input type="number" id="total_key_value" value="" placeholder = "Total (Keys)">
= <output id="outputvalue" name="x" for="winning_number total_key_value"></output>%
</form>
<button id="boton" type="submit">Submit</button>
<ol id="list"></ol>

And javascript

$('#boton').click( function() {
  value = $("#outputvalue").html();
    $('#list').append('<li>'+value+'</li>'); 
});

$(document).on('click', 'li', function () { $(this).remove(); });

When you click on button, the function create a li tag with a value in output tag with id=outputvalue in the ol with id = list

Update!! click on li element and delete. https://jsfiddle.net/bfmpkc7p/3/