I have a hidden input field in page "A". Whom value I am populating dynamically as there are 100+ values. The value changes when different element is clicked.

I want the set value in a different page "B". I am using the simple method of getting value by id but the output cames undefined.

Here is some code:

Input Field: <input type="hidden" id="sel_s_n" value="" name="sel_s_n">

Populating on element click:

jQuery('.shades-popup').click(function () {
        jQuery('#myModaldcm .modal-body').css('display', 'none');
        title = $(this).data('dcmtitle');
        $("#sel_s_n").val(title);
        var rgb = $(this).data('dcmrgb');
        var img = $(this).data('dcmimg');
        var pro_tit = $(this).data('dcmpt');
        var pro_id = $(this).data('pid');

        jQuery('.dcmptitle').html(title);
        jQuery('.csdcmp').css('background', 'rgb(' + rgb + ')');
        jQuery('.cdmpi').attr('src', img);
        jQuery.ajax({
            type: "post",
            dataType: "json",
            url: dcmAjax.dcmajaxurl,
            data: { action: "get_dcm_products", post_id: pro_id },
            success: function (response) {
                if (response.type == "success") {
                    jQuery("#dcmselextt").html(response.data);
                    jQuery('#myModaldcm .modal-body').css('display', 'block');
                }
                else {
                    alert("Network Error! Try Again")
                }
                console.log(response);
            }
        })

    });

$("#sel_s_n").val(title); --> This line add the value.

On the second page "B" I am getting it like alert( $("#sel_s_n").val() );

Can somebody point out what I am doing wrong. Thanks