Question

My code enables user to select up to 5 tags, shows the tags and counts the number.

$(document).ready(function(e) {

    var tagname = "";
    var count = 0;  

    $(".tagchoose").click(function(){ 
        count++;
        if(count < 6) {
        $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
        tagname = "<span class='selectedtg'>" + $(this).html() + "</span> / ";
        $("#displaythetags").append(tagname);
        }
    });

    $("#deletetags").click(function(){ 
        count = 0;  
        tagname = "";

        $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
        $("#displaythetags").html(tagname); 
    });

});

Unfortunately at the moment the code does not restrict selection of the duplicate tags, I would like to add restriction for users to not be able to select the same tags.

Answer 1

You could keep the selected tags in an array (tags), and then when the user adds a tag check that the item is not in the array.

$(document).ready(function(e) {

    var tagname = "";
    var count = 0;
    var tags = [];
    var thisHTML = $(this).html();

    $(".tagchoose").click(function() {
        count++;
        if ($.inArray(thisHTML, tags) == -1){
        if (count < 6) {
            $("#tagselectshow").html("Tags Selected: " + count + " tags selected");
            tagname = "<span class='selectedtg'>" + thisHTML + "</span> / ";
            $("#displaythetags").append(tagname);
            tags.push(thisHTML);
        }
        }else{
          alert('Tag already chosen');            
        }
    });
    ....