Checking to make sure an item exists before appending it to a page to avoid duplicates
While working on DriveTime I determined that for the creation of events I would need multiple buttons to exist to allow users to work through the creation of their events in correct steps.
Initially in my early builds I just displayed all the buttons at once. This worked for my purposes at the time because it gave me easy access to each button as I needed to test that functionality was working, but as pointed out by my peers it did not give clearly defined steps.
To fix this I decided to make the buttons appear after the prior button had been pressed and its functionality had been completed. With a few hiccups of getting my syntax correct and the modification of my underscore templates this worked very well for me. Unfortunately it only seemed to work well, though I did not realize a problem that existed until later on.
A few weeks later I began working on allowing users to change their route information after an initial entry by re-clicking the Submit Route button (This was put in to ensure that if someone had entered a bad address they could easily change it before final submission). It was when I was visually checking on this functionality that I noticed something odd, I all the sudden had 3 buttons which did not fit in their container. At first I thought my container sizes were off but I soon realized that I had a duplicate button. and came to realize that I had not coded anything to check to see if the button had already been created. And sure enough every time you clicked the first button a new copy of the second button appeared on the page.
After digging a little online I found a suitable idea to check to see if the button existed on the page before appending. I used the following code to make sure the Save Event button did not exist before appending it to the page.
if ($('.save_event').length < 1) {
$('.button_container_input').append('<button class="save_event">Save Event</button>')
}