Working with multiple jquery-ui-dialogs

Answer 1

test with these modifications:

var opciones = {
        title: 'Add comment',
        modal: true,
        buttons: {
            OK: function() {
                $(this).dialog('close');
                x = $('#obserText').val();
                $('#obser' + id).val(x);
            }
        }
};

$('.addObs').click(function(){

  var id = this.attr("id");
  var x = id.split('_');
  var y = '[' + x[0] + '][' + x[1] + ']';

  // If the hidden file exists, show its value
  // It should show the dialog again to allow edit the comment, but I'll leave it until later
  if ($('#obser_' + id).length>0)
  {
    alert($('#obser_' + id).val());
  }
  else  //If not...
  {
    //Create it
    $(this).parent().prepend("<input type=\"hidden\" id=\"obser_" + id + "\" />");

    //Show the dialog
    if ($("#obserText").length>0)
      $("#obserText").remove();     

    var xdialog = $("<div></div>").html("<textarea id=\"obserText\"></textarea>");
    xdialog.dialog(opciones);
  }
}

Answer 2

I think i've got it, id's with brackets is a bad idea. And I have renamed properly x and y :D

var raw_id, split_id;

    var options = {
        title: 'Add comment',
        modal: true,
        buttons: {
            OK: function() {
                $(this).dialog('close');
                valor = $('#otext' + raw_id).val();
                $('#obser' + raw_id).val(valor);
                //console.log($('#obser' + raw_id).val());
                if (valor)
                {
                    $('a#' + raw_id).find('img').attr('src', base_url + 'assets/img/observacion_on.png');
                }
                else
                {
                    $('a#' + raw_id).find('img').attr('src', base_url + 'assets/img/observacion.png');
                }

            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    };    

    $('.addObs').click(function(){

        raw_id = this.id;
        split_id = raw_id.split('_');
        prep_id = '[' + split_id[0] + '][' + split_id[1] + ']';


        if ($('#obser' + raw_id).length > 0)
        {
            //console.log($('#obser' + raw_id).val());
            var dlg = $('<div></div>').html('<textarea id="otext' + raw_id + '">' + $('#obser' + raw_id).val() + '</textarea>');
            dlg.dialog(options);

        }
        else
        {
            $(this).parent().prepend('<input type="hidden" id="obser' + raw_id + '" name="obser' + prep_id +'" />');

            var dlg = $('<div></div>').html('<textarea id="otext' + raw_id + '"></textarea>');
            dlg.dialog(options);
        }
    });

But now editing the comment doesn't work