How to add and remove classes when clicking an SVG path?

Question

I am working with a map of Brazil in SVG, and I need that when you click on a state, it add the "active" class and remove the "active" class from the others. It also has the function of adding the state name to an input.

Example:

<path id="Santa Catarina" class="BR-SC RegiaoSul str1" d="M101205 160059l0 -33 -32 -32 32" />

<script type="text/javascript">
    $(docutment).ready(function() {
        $(".str1").click(function(){
            var state = $(this).attr("id");
            $(".str1").removeClass("active");
            $(this).addClass("active");
            $("input[name=estado]").val( state );
        });
    });
</script>

With jQuery not working of course, I would like to do this in javascript, someone can help me?

Answer 1

An example: here

Later, I edit and explain better how it works, now I have little time.

The more look there if it was like this?

Any doubt comments aew. Hug.

EDIT 1

This is the remove code and adds the class:

$('.str1').click(function(ev) {
$('.str1').each(function(){
    var clazz = this.getAttribute("class");
    clazz = clazz.replace("active", "");
    this.setAttribute("class", clazz);
});
ev.target.setAttribute("class", "active " + ev.target.getAttribute("class"));
});

EDIT 2

I updated the previous code to also get the id and add it to input. Follows updated code:

$('.str1').click(function(ev) {
$('.str1').each(function(){
    var clazz = this.getAttribute("class");
    clazz = clazz.replace("active", "");
    this.setAttribute("class", clazz);
});
ev.target.setAttribute("class", "active " + ev.target.getAttribute("class"));        
var estado = ev.target.getAttribute("id"); // sem jquery
/* ou */
//var estado = $(ev.target).attr('id'); // com jquery
$('#estado').val(estado);
});

I updated the example also.