use output values for all images?

Below javascript code update just 1 img src on my page, I have 10 to 20 images on my page. one way to do is i have paste above code multiple time and apply one by one on image . So is their any better way to do this so i can apply input values on all my images.

Test My Code : http://jsfiddle.net/3ugfzL68/5/

function update() {
  let src = 'https://test.com/imgService.ashx?imagetype=typeit&postid=657406&width=' +
    $('#size2').val().replace('#', '') + '&height=100&RenderText=' +
    $('#name').val().replace('#', '') + '&TextSize=' +
    $('#size1').val().replace('#', '') + '&TextColor=%23' +
    $('#clr1').val().replace('#', '') + '&BgColor=%23' +
    $('#clr2').val().replace('#', '');
  $('#1Img').attr('src', src);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
Font Size: <input class="textsize" id="size1" onchange="update()" value="55" size="3"> Font Color: <input class="jscolor" id="clr1" onchange="update()" name="color" value="FF0000" size="6"> Background Color: <input class="jscolor" onchange="update()"
  name="color" id="clr2" value="FFFFFF" size="6"> Width: <input class="textsize" id="size2" onchange="update()" value="355" size="4">
<input class="textsize" id="name" onchange="update()" value="[field title]" type="hidden">
<br/> Style 1: <img id="1Img" alt="Image 1" src="https://test.com/imgService.ashx?imagetype=typeit&postid=657406&width=350&height=100&RenderText=name here&TextSize=55&TextColor=%23ff0000&BgColor=%23"> Style 2: <img id="2Img" alt="Image 2" src="https://test.com/imgService.ashx?imagetype=typeit&postid=655506&width=350&height=100&RenderText=2nd style name here&TextSize=55&TextColor=%23ff0000&BgColor=%23">

<br/><br/>

Solution

Firstly do not start IDs with numbers.

But since you use jQuery you can loop and assign on each change - no need for IDs

$(".control").on("change", function() {
  $(".img").each(function() {
    let src = $(this).attr(src).split("&width")[0] +
      '&width=' + $('#size2').val().replace('#', '') +
      '&height=100&RenderText=' + $('#name').val().replace('#', '') +
      '&TextSize=' + $('#size1').val().replace('#', '') +
      '&TextColor=%23' + $('#clr1').val().replace('#', '') +
      '&BgColor=%23' + $('#clr2').val().replace('#', '');
    $('#1Img').attr('src', src);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
Font Size: <input class="control textsize" id="size1" onchange="update()" value="55" size="3"> Font Color: <input class="control jscolor" id="clr1" onchange="update()" name="color" value="FF0000" size="6"> Background Color: <input class="control jscolor"
  onchange="update()" name="color" id="clr2" value="FFFFFF" size="6"> Width: <input class="control textsize" id="size2" onchange="update()" value="355" size="4">
<input class="textsize" id="name" onchange="update()" value="[field title]" type="hidden">
<br/> Style 1: <img class="img" id="Img1" alt="Image 1" src="https://test.com/imgService.ashx?imagetype=typeit&postid=657406&width=350&height=100&RenderText=name+here&TextSize=55&TextColor=%23ff0000&BgColor=%23"> Style 2: <img class="img" id="Img2" alt="Image 2"
  src="https://test.com/imgService.ashx?imagetype=typeit&postid=655506&width=350&height=100&RenderText=2nd+style+name+here&TextSize=55&TextColor=%23ff0000&BgColor=%23">

<br/><br/>