Multiple buttons on same page
I'm trying to create a ToDo list where I can add items on each day. I display all days of the week with a text area underneath the day with an Add button. I got Monday working, then I got Tuesday working, but then I can't get Wednesday to work. I'm not sure if I have a small error in my code or if I'm using jQuery wrong.
Any help would be greatly appreciated.
- <div class="daily_todo">
<div id="monday" class="dayOfWeek">
<p>Monday</p>
</div>
<div class="todo">
<form name="checkListForm">
<input type="text" name="checkListItemMonday"/>
</form>
<div id="Mondaybutton" class="button">Add!</div>
</div>
<div id="Mondaylist"></div>
</div>
<div class="daily_todo">
<div id="tuesday" class="dayOfWeek">
<p>Tuesday</p>
</div>
<div class="todo">
<form name="checkListForm">
<input type="text" name="checkListItemTuesday"/>
</form>
<div id="Tuesdaybutton" class="button">Add!</div>
</div>
<div id="Tuesdaylist"></div>
</div>
<div class="daily_todo">
<div id ="wednesday" class="dayOfWeek">
<p>Wednesday</p>
</div>
<div class="todo">
<form name="checkListForm">
<input type="text" name="checkListItemWednesday"/>
</form>
<div id="Wednesdaybutton" class="button">Add!</div>
</div>
<div class="Wednesdaylist"></div>
</div>
- $(document).ready(function(){
$('#Mondaybutton').click(function(){
var toAdd = $('input[name=checkListItemMonday]').val();
$('#Mondaylist').append("<div class='item'>"+toAdd+'</div>');
});
$('#Tuesdaybutton').click(function(){
var toAdd = $('input[name=checkListItemTuesday]').val();
$('#Tuesdaylist').append("<div class='item'>"+toAdd+'</div>');
});
$('#Wednesdaybutton').click(function(){
var toAdd = $('input[name=checkListItemWednesday]').val();
$('#Wednesdaylist').append("<div class='item'>"+toAdd+'</div>');
});
});