JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>String of 1's and 0's: <input id="inputString" type="text">
<button id="getAnswer">
Find minimum swaps!
</button></div>
<br>
<div id="answerInfo">
</div>

JavaScript

function getOneIndices(inputString) {
	var oneIndices = [];
  for (var i=0; i<inputString.length; i++) {
  	if (inputString.charAt(i) === "1") {
    	oneIndices.push(i);
    }
  }
  return oneIndices;
}

function getSwapInfo(inputString) {
  var oneIndices = getOneIndices(inputString);
  var middleOfOneIndices = Math.round(oneIndices.length/2)-1;
  var centerIndex = oneIndices[middleOfOneIndices];
  var minSwaps = 0;

  for (var i=0; i<oneIndices.length; i++) {
    minSwaps += Math.abs(oneIndices[middleOfOneIndices]-oneIndices[i])-Math.abs(middleOfOneIndices-i);
  }

	return ({
    centerIndex:	centerIndex,
    minSwaps:			minSwaps
  });
}

$("#getAnswer").click(function() {
  var inputString = $("#inputString").val();
  var swapInfo = getSwapInfo(inputString);
  
	$("#answerInfo").text(
      "The minimum number of adjacent swaps is " + 
      swapInfo.minSwaps + 
      ". The center index is " + 
      swapInfo.centerIndex +
      "."
    );
});