Question is in a comment of line 25 of models.js.

main.js

var AppRouter = Backbone.Router.extend({
    routes: {
        ""  : "list",
        "clients/:id" : "clientDetails"
    },

    initialize: function () {
    },
    list: function(page) {
        $('#header').html(new HeaderView().render().el);
        var clientList = new ClientCollection();
        clientList.fetch({success: function(){
            $("#content").html(new ClientListView({model: clientList}).el);
        }})
    },

    clientDetails: function (id) {
        var taskList = new TaskCollection({id: id});
        $('#header').html(new HeaderView().render().el);
        taskList.fetch({
            success: function(data){
                $("#content").html(new TaskListView({model: taskList}).el);
            },
            error: function() {
                alert("error");
            }
        })
    }
});

app = new AppRouter();
Backbone.history.start();

models.js

window.Client = Backbone.Model.extend({
    urlRoot: "api/client_list",
    defaults: {
        id: null,
        name: null,
        city: null,
        state: null
    }
});

window.ClientCollection = Backbone.Collection.extend({
    model: Client,
    url: "api/client_list"
});

window.Task = Backbone.Model.extend({
    urlRoot: "api/client/", 
    defaults: {
        id: null
    }
});

window.TaskCollection = Backbone.Collection.extend({
    model: Task,
    url: "api/client/" //How do I append the ID to this URL?
});

Remove line 17
urlRoot: "api/client/"
urlRoot is needed only if the model is not in a collection

Another solution is to override the url function on the model and return "api/client/"+this.id but for this example my previous comment is a better solution.