Jquery - setting value of - function is called, but values not set

Question

I'm trying to use jquery to set the value of some tags. This is for a the admin side of a wordpress widget which will store a list of records, keyed by a date that are retrieved by using a <select>. In order to achieve this I'm having to to some janky value storage in data-* attributes to link the contents of three hidden <select> lists.

The idea is that the hidden list's values are retrieved by grabbing the visible <select>'s selected <option>'s data-date attribute value and grabbing the <option> in each hidden <select> that has a matching data-date. These values are then put into <input> fields for the user to edit.

HTML fragment

<label for="spdates">Special Dates:</label>

<p>
  <select id="spdates">
    <option data-date='new' value='new'>New Date</option>
    <option data-date='23/05/1992' value='23/05/1992'> 23/05/1992-jake</option>
    <option data-date='15/08/1997' value='15/08/1997'> 15/08/1997-rebecca</option>
    <option data-date='17/03/1995' value='17/03/1995'> 17/03/1995-clive</option>
  </select>
</p>
<p>
  <label for="spname">Special Name:</label>
  <input class="widefat namspani" id="spname" type="text" value="" />
</p>
<p>
  <label for="sptext">Special Text:</label>
  <input class="widefat namspani" id="sptext" type="text" value="" />
</p>
<p>
  <label for="spdate">Special Date(dd/mm/yyyy):</label>
  <input class="widefat namspani" id="spdate" type="date" value="" />
</p>
<p>
  <label for="spimage">Special Image:</label>
  <br />
  <input type="text" class="img anisp" id="spimage" value="" />
  <input type="button" class="select-imgsp" value="Select Image" />
</p>

<select id="eventNames" name='widget-dates_widget[__i__][eventNames][]' multiple hidden>
  <option data-date='23/05/1992' value='[23/05/1992]jake' selected> jake</option>
  <option data-date='15/08/1997' value='[15/08/1997]rebecca' selected> rebecca</option>
  <option data-date='17/03/1995' value='[17/03/1995]clive' selected> clive</option>
</select>
<select id="eventText" name='widget-dates_widget[__i__][eventText][]' multiple hidden>
  <option data-date='23/05/1992' value='[23/05/1992]yay me' selected> yay me</option>
  <option data-date='15/08/1997' value='[15/08/1997]rebecca' selected> rebecca</option>
  <option data-date='17/03/1995' value='[17/03/1995]clive' selected> clive</option>
</select>
<select id="eventImages" name='widget-dates_widget[__i__][eventImages][]' multiple hidden>
</select>

Jquery function

$(function() {

  //onchange for the date select to populate the other boxes
  $(document).on('change', 'select#spdates', function(evt) {
    var date = $(this).find(":selected").attr("data-date");
    if (date == "new") {
      //new date selected, discard what's in the boxes and blank values
      $(".namspani").val("");
    } else {
      //different date selected, discard what's in the boxes and blank values
      alert($("#eventNames").find("[data-date='" + date + "']").text());
      $("#spname").val($("#eventNames").find("[data-date='" + date + "']").text()); //grab from other lists
      $("#sptext").val($("#eventText").find("[data-date='" + date + "']").text());
      $("#spdate").val(date);
      $("#spimage").val($("#eventImagess").find("[data-date='" + date + "']").text());
    }
  });
})

I've confirmed my code is being run as I've put an alert() containing one of the values I'm trying to set in the branch of the function i expect to run. In practice the alert files, with the right content, however the input fields don't fill with data.

This code works in jsfiddle https://jsfiddle.net/ForceGaia/j363mv3w/1/ but not natively in firefox or chrome.

What is going on? I'm fairly new to jquery, so I'm now wondering if I'm missing something basic.

EDIT:

The alert fires, so i know it's getting to the right chunk of code, thus some version of JQuery seems to be working. console.log($().jquery); puts 1.12.4 to the log.

I tried putting hardcoded strings into the .var() parameters, still nothing.

I moved the $("#spname") search into a variable to see if it was finding it.

var spnamedom = $("#spname");

After that chunk of code spnamedom was an array of elements (which, knowing jQuery, i expected) I tried accessing the 0th element and it was the correct element.

so i tried both of the following

var spnamedom = $("#spname");
spnamedom.val("a thing");

And

var spnamedom = $("#spname")[0];
spnamedom.val("a thing");

spnamedom is always what I'm expecting, but neither work. There is an element with the correct id in both cases, either as the 0th element, or straight in the variable.

he latter puts TypeError: spnamedom.val is not a function to the log. I assume that error is because I'm no longer in a JQuery object and am looking at a DOM object after i grabbed the 0th element. I could possibly edit this raw DOM element to get what I want, but the initial question remains, why does my code work in jsfiddle, but not a live browser; as from the reading I'm doing, this should work.

I have also found jQuery .val change doesn't change input value and using `.attr('value','text') doesn't work either.

EDIT 2

I realised that in my code i have something that does what i want already on different controls, and it works - which is even more bewildering. I had totally forgotten that the code was performing the same action when it came down to it.

Before i only supplied an exerpt of my JQuery script, here's the entire thing

var image_field;
jQuery(function($) {
    $(document).on('click', 'input.select-img1', function (evt) {
        image_field = $(this).siblings('.img');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });
    $(document).on('click', 'input.select-img2', function (evt) {
        image_field = $(this).siblings('.img');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });
    $(document).on('click', 'input.select-img3', function (evt) {
        image_field = $(this).siblings('.img');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });
    $(document).on('click', 'input.select-imgsp', function (evt) {
        image_field = $(this).siblings('.img');
        tb_show('', 'media-upload.php?type=image&TB_iframe=true');
        return false;
    });

    window.send_to_editor = function (html) {
        imgurl = $('img', html).attr('src');
        image_field.val(imgurl);
        tb_remove();
    }

   // onchange for the date select to populate the other boxes
    $(document).on('change', 'select#spdates', function (evt) {
        console.log($().jquery);
        var date = $(this).find(":selected").attr("data-date");
        if (date=="new") {
            //new date selected, discard what's in the boxes and blank values
            $(".namspani").val("");
        }
        else {
            //different date selected, discard what's in the boxes and blank values
            alert($("#eventNames").find("[data-date='"+date+"']").text());
            var spnamedom = $("#spname");
            spnamedom.attr('value', 'new value'); //grab from other lists
            $("#sptext").val($("#eventText").find("[data-date='"+date+"']").text());
            $("#spdate").val(date);
            $("#spimage").val($("#eventImagess").find("[data-date='"+date+"']").text());
        }
    });
});

the code i didn't include is acts on bits of html that look like this

<p>
    <label for="s3image">Image 3:</label><br />
    <input type="text" class="img ani1" name="widget-namsoc_nextmeet_widget[__i__][s3image]" id="s3image" value="" />
    <input type="button" class="select-img3" value="Select Image" />
</p>

What it does is open the Wordpress image uploader dialog when you click a button. When "insert into post" is pressed it sets the path value into the field.

This code works. So what is so different to the other code that makes it fail?