Edit in JSFiddle

$('.revealer').click(function () {

    var foo = $(this).closest('.revealBox').find('.reveal');
    $(foo)[this.checked ? "show" : "hide"]();

});

$('.item-add').click(function () {
    $('.card').hide();
    $('.item-menu').fadeIn(200);
    $('.item-add').hide();

});





$('.item-select a').click(function () {

    $('.item-menu').hide();
    $('.item-form').hide();
    var itemClassId = $(this).attr('class');
    var itemForm = '.' + itemClassId + '-form';
    console.log(itemForm);
    $(itemForm).fadeIn(200);

});


$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function () {
    var counter = 0;
    $('form').submit(function () {
        counter += 1;
        //alert(counter);
        
        $('.item-add').fadeIn(200);
        var $form = $(this);
        var id = $form.attr('id');
        var data = $form.serializeObject();
        var dataString = JSON.stringify(data);
     
        console.log(dataString);
        console.log(dataString.fItem);
        $('#result').show().text(dataString);
        $('.list-group').prepend('<li id="itemId'+ counter +'" class="list-group-item '+ data.fItem +' linker"><a><h4>' + data.fName + '</h4><p>' + data.fItem + '</p></a></li>');
        if(data.fItem == 'Marching Band'){
            $('.cards').prepend('<div id="itemId'+ counter +'Card" class="card '+ data.fItem +'"><h4><small>Name:</small></h4><p class="h4">' + data.fName + '</p><h4><small>Type:</small></h4><p class="h4">' + data.fItem + '</p><h3><small>Number of people:</small></h3><p class="h4">' + data.fPeople + '</p><h4><small>Song List</small></h4><p class="h4">' + data.fSongList + '</p><a href="#a" class="remove">Remove</a></div>');
        }else if(data.fItem == 'Decorated Float'){
            $('.cards').prepend('<div id="itemId'+ counter +'Card" class="card '+ data.fItem +'"><h4><small>Name:</small></h4><p class="h4">' + data.fName + '</p><h4><small>Type:</small></h4><p class="h4">' + data.fItem + '</p><h4><small>Description:</small></h4><p class="h4">' + data.fDescription + '</p><h4><small>Company Sponsor:</small></h4><p class="h4">' + data.fSponsor + '</p><h4><small>Float Dimensions:</small></h4><p class="h4">' + data.fDims + '</p><h4><small>Are there riders?</small></h4><p class="h4">' + data.fRiders + '</p><a href="#a" class="remove">Remove</a></div>');
        }else{
            $('.cards').prepend('<div id="itemId'+ counter +'Card" class="card '+ data.fItem +'"><h4><small>Name:</small></h4><p class="h4">' + data.fName + '</p><h4><small>Type:</small></h4><p class="h4">' + data.fItem + '</p><h4><small>Description:</small></h4><p class="h4">' + data.fDescription + '</p><h4><small>People count:</small></h4><p class="h4">' + data.fPeople + '</p><h4><small>Vehicles:</small></h4><p class="h4">' + data.fVehicle + '</p><h4><small>Handouts:</small></h4><p class="h4">' + data.fHandout + '</p><a href="#a" class="remove">Remove</a></div>');
        }
        
        $(this).parent().hide();
        
        return false;

    });
});


$(function() {
    $( ".lineup" ).sortable();
    $( ".lineup" ).disableSelection();
  });




$(document).on("click", ".linker", function(){ 
var listPos = $(this).attr('id');
    //var listGroupItemClass = $(this).attr('class');
    
    $('.card').hide();
    var cardPos = '#' + listPos + 'Card'
   $('.cards').find(cardPos).show();
    console.log(cardPos);
    //$('.forms').find(listGroupItemClass).show();
}); 


$(document).on("click", ".remove", function(){ 
    var currentId = $(this).closest('.card').attr('id');
    $('#'+currentId).remove();
    var removeId = currentId.slice(0,-4);
    $('#'+currentId).remove();
    $('#'+removeId).remove();
}); 

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="dropdown">
               
                 <h1>Worthington Parade</h1>

                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>

                    </li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a>

                    </li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a>

                    </li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-8">
            <div class="item-menu text-center" style="display:none">
                 <h2>Participant type:</h2>

                <ul class="item-select list-inline">
                    <li><a href="#a" class="item1">Marching Band</a>

                    </li>
                    <li><a href="#a" class="item2">Decorated Float</a>

                    </li>
                    <li><a href="#a" class="item3">Walking Group</a>

                    </li>
                </ul>
            </div>
            <div class="item-form item1-form" style="display:none;">
                 <h2>Marching Band</h2>
                
                <form  id="item1-form" role="form" method="post">
                    <input type="hidden" name="fItem" value="Marching Band">
                    
                    <div class="form-group">
                        <label for="inputName ">Band name:</label>
                        <input name="fName" type="text " class="form-control " id="inputName " placeholder="Enter float name" />
                    </div>
                    <div class="form-group ">
                        <label for="inputPeople">Number of members:</label>
                        <input name="fPeople" type="text" class="form-control" id="inputPeople" placeholder="10" />
                    </div>
                    <div class="form-group">
                        <label for="">Song List</label>
                        <textarea name="fSongList" class="form-control" rows="3" placeholder="Game of Thrones, Low Rider, Fight Song, etc"></textarea>
                    </div>
                    <button type="submit" class="btn btn-default">Add</button>
                </form>
            </div>
            <div class="item-form item2-form" style="display:none;">
                 <h2>Decorated Float:</h2>

                <form id="item2-form"  role="form" method="post">
                    <input type="hidden" name="fItem" value="Decorated Float">
                    <div class="form-group">
                        <label for="inputName">Participant name:</label>
                        <input name="fName" type="text " class="form-control " id="inputName " placeholder="Name that is announced" />
                    </div>
                    <div class="form-group ">
                        <label for="input">Brief description:</label>
                        <textarea name="fDescription" class="form-control" rows="3" placeholder="Describe your float" ></textarea>
                    </div>
                    <div class="form-group ">
                        <label for="inputName">Company sponsor:</label>
                        <input name="fSponsor" type="text" class="form-control" id="inputName" placeholder="Shoutouts or funding helpers" />
                    </div>
                    <div class="form-group ">
                        <label for="inputName ">Dimensions:</label>
                        <input name="fDims" type="text" class="form-control " id="inputName " placeholder="Approximate length, width and height" />
                    </div>
                    <div class="form-group ">
                        <label for="inputName ">Will anyone be riding on the float?</label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="fRiders" id="optionsRadios1" value="Yes">Yes</label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="fRiders" id="optionsRadios2" value="No">No</label>
                    </div>
                    <button type="submit" class="btn btn-default ">Add</button>
                </form>
            </div>
            <div id="item3-form" class="item-form item3-form" style="display:none;">
                 <h2>Walking Group:</h2>

                <form role="form" method="post">
                    <input type="hidden" name="fItem" value="Walking Group">
                    <div class="form-group ">
                        <label for="inputName ">Participant name</label>
                        <input name="fName" type="text " class="form-control " id="inputName " placeholder="Name that is announced" />
                    </div>
                    <div class="form-group ">
                        <label for="input ">Brief description:</label>
                        <textarea name="fDescription" class="form-control" rows="3" placeholder="Clowns, girlscouts, poltical, etc"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="inputName">Number of walkers:</label>
                        <input name="fPeople" type="text " class="form-control " id="inputName " placeholder="How big is your group?" />
                    </div>
                    <div class="revealBox">
                        <div class="checkbox">
                            <label>
                                <input class="revealer" type="checkbox">Vehicle?</label>
                        </div>
                        <div class="form-group reveal" style="display:none ">
                            <label for="input ">What kind of vehicle?</label>
                            <input type="text " name="fVehicle"  class="form-control " id="exampleInputPassword1 " placeholder="Tractor, Truck, Firetruck, etc ">
                        </div>
                    </div>
                    <div class="revealBox ">
                        <div class="checkbox ">
                            <label>
                                <input class="revealer" type="checkbox">Handouts?</label>
                        </div>
                        <div class="form-group reveal" style="display:none ">
                            <label for="input">What kind of handouts?</label>
                            <input type="text" name="fHandout" class="form-control " id="exampleInputPassword1 " placeholder="candy, shirts, pamphlets, etc ">
                        </div>
                    </div>
                    <button type="submit " class="btn btn-default ">Add</button>
                </form>
            </div>
                            <div class="cards"></div>
        </div>
        <div class="col-sm-4 ">
            
            <ul class="list-group lineup">
                
            </ul>
            <button type="button " class="pull-right btn btn-primary item-add">Add Participant</button>
        </div>
    </div>
</div> <!-- <pre id="result" style="display:none;">
</pre> -->
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}

.list-group-item{
    cursor:pointer;
}

.card {
    padding:20px;
    margin-bottom:10px;
    background-color:#efefef;
}