I'm currently working on a project to create a simple "to-do list" and I've encountered an issue that seems pretty basic. I am trying to pass the main input from #myInput at the top, down to the next line below, but I'm facing some challenges. When you enter something and click add, it initially creates a blank new line, then if you type something else and click add again, what was previously entered shows up on the next line. This continues for as long as you input different text, but if you repeatedly hit add with the same input, nothing shows up. Once you change the input to something different and click add, everything appears. It's quite frustrating that the current line output doesn't display properly. If anyone has suggestions on how to resolve this issue, they would be greatly appreciated. You can view exactly what is happening in the JSfiddle link provided below.
<div>
<form id="addThings" type="text">
<input type="text" id="myInput" placeholder="add to your to-do list" size="50" maxlength="40" autocomplete="off" autofocus>
<input type="button" id="addButton" value="add">
</form>
</div>
Furthermore, when you click the button to create a new line below, it shifts everything around a bit. Any suggestions on what changes need to be made in the CSS to make it smoother? I'm aiming for a more seamless interface. Thank you!
$(function() {
var i = 2;
$('#addButton').click(function(e) {
var input = $('#myInput').val();
console.log(input);
var id = "newLine" + i;
var line = '<input type=\"text\" id=\"' + id + '\" size=\"50\" disabled><input type=\"checkbox\" >';
$('form').append(line);
var newId = "#" + id;
$('#myInput').change(function() {
$(newId).val(input);
});
i += 1;
});
});