Unable to apply dynamic css style

Unable to apply dynamic css style

My function writes out a string each time the mouse is clicked, I can't get the string to show red as I require, thanks for any help-
  1. <script>
    $(document).ready( function(){   
    var counter = 1;   
    function showstring(event) {
        var stringholder = "a text string";
        $("body").append("<div id=" + counter + ">" +stringholder +  "</div>");
        $("[id= counter]").css("color", "red");
        counter++;
    }
    $( document ).on( "click", showstring);   
    });
    </script>