Limiting upload slots with append

[squigs]

Hope everyone is doing well,

I'm trying to append items with javascript but limit the amount of times they can be appended. Currently I am using this to add the items with no limit.

$(".add").click(function() {
      $("td.files").append('<tr><td><input type="file" name="uploaded_file[]" class="file_input" size="46" style="margin-top:3px;"/><a class="delete" href="javascript:void(0)" style="color:blue; padding-left:15px;">Remove File</a></td></tr>');
});

I have been playing with the following but am unable to get it functioning:

var count = 0;
$(".add").onclick = function(e) {
    if (count >= 4) {
        return false;
    }
    else {
        count++;
        $("td.files").innerHTML += '<tr><td><input type="file" name="uploaded_file[]" class="file_input" size="46" style="margin-top:3px;"/><a class="delete" href="javascript:void(0)" style="color:blue; padding-left:15px;">Remove File</a></td></tr>';
    }
};

I have also tried assigning IDs instead of classes and using document.getElementById to no avail.  am I doing wrong here?

 

Thanks

[squigs]

Got it sorted out! I ended up using this to get my desired result.

var addFile = document.getElementById('addFile');
addFile.onclick = function addFile() {
    if (this.count == undefined) {
        this.count = 0;
    }

    if (this.count++ < 4) {
        $("td.files").append('<tr><td><input type="file" name="uploaded_file[]" class="file_input" size="46" style="margin-top:3px;"/><a class="delete" href="javascript:void(0)" style="color:blue; padding-left:15px;">Remove File</a></td></tr>');
    }
};