Leaflet not pulling in unique GeoJSON attributes

Question

I am building an app in Leaflet where a user can click on a GeoJSON feature and it will show the unique value of the feature in the popup. The attributes shown are each in an input box so that the user can edit them. Originally my table was inside my popup with the value of each property set to feature.properties.property but that didn't seem editable so I put it in a <div> element. I'm a novice to HTML and JavaScript so it's possible I'm taking the wrong approach. But when I click on a feature instead of it pulling that feature's unique attributes, it appears to be picking up the attributes of the last feature in my GeoJSON.

I know that it won't update automatically without a web server. I don't know if I would be allowed to set one up if I knew how, so I have a workaround where I added a button that exports the GeoJSON. Previously I copied the code in this Plunker but pointed it to one of my feature attributes: http://plnkr.co/edit/VzUfSD?p=preview.

Clicking a feature gave me its unique value and upon editing it and clicking the button, it downloaded a new GeoJSON file with the edited value changed, so I know my workaround works (but it doesn't permanently change my GeoJSON until I save my downloaded file over it).

So why won't it give me the attributes of the feature I click but (apparently) those of the last feature in my GeoJSON file?

Here is the HTML code for the popup:

<div id="popup">
<table>
   <tr>
      <td colspan="2"><strong>Pipe Size:</strong><br /><input id="PS1"></td>
   </tr>
   <tr>
      <td colspan="2"><strong>Pipe Type:</strong><br /><input id="PS2"></td>
   </tr>
   <tr>
      <td colspan="2"><strong>Pipe Material:</strong><br /><input id="PS3"></td>
   </tr>
   <tr>
      <td colspan="2"><strong>Mylar File Name:</strong><br /><input id="PS4"></td>
   </tr>
   <tr>
      <td colspan="2"><a id="PS5" target="_blank">Mylar Tablet</a></td>
   </tr>
   <tr>
      <td colspan="2"><a id="PS6" target="_blank">Mylar Desktop</a></td>
   </tr>
</table>
</div>

And here is the JavaScript Code for the popup:

function pop_WaterPipe(feature, layer) {
    var popupContent = document.getElementById("popup");
    PS1 = document.getElementById("PS1");
    PS1.value = feature.properties['PipeSize'];
    PS1.addEventListener('change', function () {
        feature.properties['PipeSize']= PS1.value;
    });
    PS2 = document.getElementById("PS2");
    PS2.value = feature.properties['PipeType'];
    PS2.addEventListener('change', function () {
        feature.properties['PipeType'] = PS2.value;
    });
    PS3 = document.getElementById("PS3");
    PS3.value = feature.properties['PipeMateri'];
    PS3.addEventListener('change', function () {
        feature.properties['PipeMateri'] = PS3.value;
    });
    PS4 = document.getElementById("PS4");
    PS4.value = feature.properties['Service_Ca'];
    PS4.addEventListener('change', function () {
        feature.properties['Service_Ca'] = PS4.value;
    });
    PS5 = document.getElementById("PS5");
    PS5.href = '"W:/DPW' + '/' + 'Water_&_Sewer' + '/' + 'App' + '/' + 'Street Mylars' + '/' + (feature.properties['Service_Ca'] !== null ? Autolinker.link(String(feature.properties['Service_Ca'])) : 'None') + '"';
    PS6 = document.getElementById("PS6");
    PS6.href = '"W:/DPW' + '/' + 'Water_&_Sewer' + '/' + 'App' + '/' + 'Street Mylars' + '/' + (feature.properties['Service_Ca'] !== null ? Autolinker.link(String(feature.properties['Service_Ca'])) : 'None') + '"';
    layer.bindPopup(popupContent);
    }

Answer 1

In your layer definition, in it's onEachFeature function, you use a layer.on.click event to get that features information. Below I would take it's PipeSize value and stick it in the table element "PS1".

function forEachFeature(feature, layer) {
        var popupContent = document.getElementByID("popup");  
        layer.bindPopup(popupContent);
        layer.on('click', function (e) {
            PS1 = document.getElementById("PS1");
            PS1.value = e.target.feature.properties.PipeSize;
            })
        };

Then

var pipe = L.geoJSON(null, {
            onEachFeature: forEachFeature,
            color:'blue'
           });