Different function call depending on shortcode?

The problem is that if your JavaScript is referring to the IDs of the forms and inputs, so if you have both on the same page the script will only run with the values of the first form.

The simplest solution would be to use different IDs for the elements in each shortcode, but a better permanent solution would be to make you script work based on a class, and use the values from the submitted form, rather than global IDs.

So change your form to just have a class on the form element:

<form class="distance-calculator">
    <input type="hidden" name="to" value="Postcode2">
    <input type="text" name="from">
    <input type="submit" value="Calculate">
</form>
<div class="result"></div> 

I’ve removed everything not relevant to the question for clarity. I also removed method="post" since POST is not appropriate for getting a value. I also changed the result div to use a class.

Then update your JavaScript to target submission of the .distance-calculator form, and use the from and to value only from the submitted form. Then use only the .result after the form.

jQuery( '.distance-calculator' ).on( 'submit', function( event ) {
    event.preventDefault();

    var form = this;

    var from = form.from.value;
    var to   = form.to.value;

    jQuery.ajax( {
        url : ajaxurl,
        type : 'GET',
        data: {
            'action' : 'distancewpcalculator',
            'from' : from,
            'to' : to
        },
        success: function( data ) {
            jQuery.next( '.result' ).html( data );
        },
        error: function( errorThrown ) {
            console.log(errorThrown);
        }
    } );
} );

I also changed the POST to GET here. As I mentioned before POST is not appropriate for this type of request. POST should only be used for creating or updating a resource, while GET should be used for retrieving data. It just means you’ll need to update your PHP to use $_GET instead of $_POST.