Multiple fields with Bootstrap editable and jquery

Multiple fields with Bootstrap editable and jquery

Hi,

I'm having toruble paassing two different fields with Bootstrap editable and jquery. My script is as follows:

  1. <script type="text/javascript">
    jQuery(document).ready(function() { 
            $.fn.editable.defaults.mode = 'popup';
            $('.xedit').editable();       
            $(document).on('click','.editable-submit',function(){
                var x = $(this).closest('td').children('span').attr('id');
                var y = $('.input-sm').val();
                $.ajax({
                    url: "add_homepreds.php?id="+x+"&home="+y,
                    type: 'GET',
                });
            });
            $.fn.editable.defaults.mode = 'popup';
            $('.test').editable();       
            $(document).on('click','.editable-submit',function(){
                var x = $(this).closest('td').children('span').attr('id');
                var y = $('.input-sm').val();
                $.ajax({
                    url: "add_awaypreds.php?id="+x+"&away="+y,
                    type: 'GET',
                });
            });

    });
    </script>

























I'm trying to load <span class="xedit"> for one field and <span class="test"> for another with different url outputs, but bootstrap editable js makes the 'input-sm' in both cases and always runs the first url "add_homepreds.php?id="+x+"&home="+y" together with the second one (both fields are always updating).

Can someone help me figure this out?