How to call two different javascript function for css class with different id

[kiranking]

In my form there are two anchor tags Add and Clear having same class called button. What I am trying is submit the form data to another page(post) using ajax & clear is for clearing the data using javascript.The problem is that as both buttons having the class the same function(submit) is called for both button.
css is look like:

form.addwords .button
{
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  font-size: 15px;
  height: 43px;
  width: 107px;
}
form.addwords #addwordsbutton
{
background:url("../img/leftbtn.png") no-repeat 0 0;
}
form.addwords #clearwordsbutton
{
background:url("../img/rightbtn.png") no-repeat 0 0;
}

JS script

jQuery('.button').live('click', function(event) {
var da=$('#addwords').attr('value');
alert(da);
$.ajax({
type: "POST",
url: "addmulti.php",
data: "knw=" + da,
success: function(data){

$('#results').html(data);
},
error: function(){
alert('Error');
}
});
});//end of .button click

form code

<a href='#' class='button' id='addwordsbutton'><span class="try">Add</span></a>
<a href='#' class='button' id='clearwordsbutton' onClick='this.form.reset();'><span class="try">Clear</span></a>
<input id="myButton" type="button" value="To check" onclick="this.form.reset();">

What methods I tried?
1. changed the changed the line to check whether the inline reset call is triggering or not. but no success.

jQuery('.button').live('click', function(event)
to
jQuery('.button[B]s[/B]').live('click', function(event)

2.Added dummy button of input type button. This time inline onclick event is triggered

[momoh]

you should probably change your jQuery selector so as to make use of the id of the anchor tags...

jQuery('#addwordsbutton').live();

unless im not getting what the problem is

[kiranking]

you should probably change your jQuery selector so as to make use of the id of the anchor tags...

jQuery('#addwordsbutton').live();

unless im not getting what the problem is

I think but not sure it is not possible to add inline function to onClick event of anchor tag. So I changed the jquery code like below. But the problem is I can not reuse for any other form. What I was trying is when ever the clear button is clicked ajax click event should fire, and there get the parent node of current id then perform the clear.

Is it possible momoh?

jQuery('.button').live('click', function(event) {
                        var t_id= $(this).attr('id');
                        [B]if(t_id==="clearwordsbutton")
                        {
                            $(':input','#addwords')
                            .not(':button, :submit, :reset, :hidden')
                            .val('')
                            .removeAttr('checked')
                            .removeAttr('selected');
                            exit();
                        }[/B]
                        var da=$('#addwords').attr('value');
                        alert(da);
                        $.ajax({
                            type: "POST",
                            url: "addmulti.php",
                            data: "knw=" + da,
                            success: function(data){
                                //$(this).parent().fadeOut();
                                $('#results').html(data);
                            },
                            error: function(){
                                alert('Error');
                            }
                        });
                    });//end of .button click

[momoh]

the best thing to do is to first of all create a function.that will help with code reuse for another form.
also, if you could put as much code as possible to explain what you want to do. im trying to guess from every reply what you want to do.

back to your initial post. if you want two buttons with the same class to act differently, you should first call on the class selector '.button' then within that argument, get the id of the clear button or the clear button before using it.

does this help somehow?

[kiranking]

you should first call on the class selector '.button' then within that argument, get the id of the clear button or the clear button before using it.

That is what exactly I did.Let me explain more precisely
I am concreting the basic functionality required for whole site one by one in a dummy page like submit,clear,validation,email,capcha,comment,contact us. and more.Once I am sure everything is working then separate them into php then reuse it.
Now a days we can see comment or contact form are placed in home page itself , so my concern will be like if I have a forms in single page like Registration,Comment, login each form will have same class for button(though out the site all buttons have same class) but only id will change.
What I am looking for is
Clear -> Ajax Click event->Get the parent node(form)-> clear all form elements.
If the parent node is not form then I should apply loop until I get the form element then apply clear.By this way if I change the Id of clear button code will work without any changes.